CSS+JS实现图片集展示（二）

概述题目与上面的两篇文章有所重复，但是内容与上两篇上有所区别，本文中，实现的图片集展示的效果为：1、详细图和缩略图的同步展示；2、图片的自动播放；3、显示图片的缩影图的焦点显示与别的图片的遮盖显示；4、鼠标移动至详图显示图片控制控件。具体效果图如下：初始化或者第一张状态中间状态最后一张状态这种方式的图片

题目与上面的两篇文章有所重复，但是内容与上两篇上有所区分，本文中，实现的图片集展现的效果为：

1、详细图和缩略图的同步展现；

2、图片的自动播放；

3、显示图片的缩影图的焦点显示与别的图片的遮盖显示；

4、鼠标移动至详图显示图片控制控件。

具体效果图以下：

初始化或第1张状态

中间状态

最后1张状态

这类方式的图片展现1般用的图片新闻或类似的东西中比较常见，例如百度首页的新闻就是用类似的方式来展现的，以下：

百度首页新闻

下面将我实现的代码贴出来，以供大家参考。

1、showimg.CSS

HTML,body{ height: 100%; margin: 0; padding: 0; text-align: center;}#prev{ position: absolute; top: 125px; left: 0px; wIDth: 45px; height: 50px; background: url(../img/prev.png);}#next{ position: absolute; top: 125px; right: 0px; wIDth: 45px; height: 50px; background: url(../img/next.png);}#prev:hover,#next:hover{ cursor: pointer;}.detail-div{ position: relative; display:inline-block; padding:4px; margin:0 0.5rem 1rem 0.5rem 1rem; line-height:0; -webkit-Transition:background-color 0.1s ease-out; -moz-Transition:background-color 0.1s ease-out; -o-Transition:background-color 0.1s ease-out; Transition:background-color 0.1s ease-out; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px;}.thumb-div{ position: absolute; bottom: ⑴10px; left: 4px; background: #555;}.thumb{ margin-left: 7px; margin-top: 5px; margin-bottom: 5px; float: left; position: relative;}.thumb-img{ -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px}.thumb-active{ border: 2px solID #fff; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; height: 100px;}.thumb-modal{ background: #141414; opacity: 0.5; filter:Alpha(opacity=50); position: absolute; left: 0px; bottom: 2px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px;}.thumb-modal-hIDe{ display: none;}
2、juqery.showimg.Js

(function($){ $.fn.showimg = function(options){ var defaults = {}; var options = $.extend(defaults,options); var container=$(this); var imgurls = options.imgurls; var wIDth = options.wIDth,height = options.height,thumbHeight = options.thumbHeight; var autoplay = options.autoplay; container.CSS("wIDth",wIDth+"px"); var imgIndex = 1,length = imgurls.length; var play; /** * 图片详情 */ var detaildiv = $("<div></div>").addClass("detail-div").appendTo(container); var ctrldiv = $("<div></div>").appendTo(detaildiv).hIDe(); var prevA = $("<a></a>").attr("ID","prev").appendTo(ctrldiv).hIDe(),nextA = $("<a></a>").attr("ID","next").appendTo(ctrldiv); $(".detail-div").live("mouseenter",function(){ play = clearInterval(play); ctrldiv.show(); }); $(".detail-div").live("mouseleave",function(){ play = setInterval(playimg,3000); ctrldiv.hIDe(); }); var detailimgA = $("<a></a>").appendTo(detaildiv); var detailimg = $("<img />").attr("ID","detailimg") .attr("wIDth",wIDth) .attr("height",height) .attr("src","img/demopage/image-"+imgIndex+".jpg") .appendTo(detailimgA); /** * 缩影图片 */ var thumbdiv = $("<div></div>").addClass("thumb-div") .appendTo(container) .CSS("wIDth",wIDth+"px"); addThumbimgs(); prevA.on("click",function(){ imgCtrlFun("prev"); }); nextA.on("click",function(){ imgCtrlFun("next"); }); if(autoplay){ play = setInterval(playimg,3000); } function playimg(){ if(imgIndex===length){ imgIndex=0; } nextA.click(); } /** * 图片控制 * @param type */ function imgCtrlFun(type){ if(type==="prev"){ if(imgIndex>1){ imgIndex= imgIndex⑴; } } else{ if(imgIndex<length){ imgIndex= imgIndex+1; } } $("#detailimg").attr("src","img/demopage/image-"+imgIndex+".jpg"); thumbdiv.HTML(""); addThumbimgs(); if(imgIndex===length){ $("#next").hIDe(); } else{ $("#next").show(); } if(imgIndex===1){ $("#prev").hIDe(); } else{ $("#prev").show(); } }; /** * 添加图片缩影 */ function addThumbimgs(){ var thumbWIDth = wIDth/3⑴0; for(var i=imgIndex⑵;i<imgIndex+1;i++){ var thumb = $("<div></div>").addClass("thumb").appendTo(thumbdiv); var thumbModaldiv = $("<div></div>").addClass("thumb-modal").appendTo(thumb); thumbModaldiv.CSS("height",thumbHeight+"px") .CSS("wIDth",thumbWIDth+"px"); var thumbimg = $("<img />").attr("ID","thumb"+(i+1)) .attr("wIDth",thumbWIDth) .attr("height",thumbHeight) .addClass("thumb-img") .appendTo(thumb); if(!(i<0)){ thumbimg.attr("src",imgurls[i]); } if(i===imgIndex⑴){ thumb.addClass("thumb-active"); thumbModaldiv.addClass("thumb-modal-hIDe"); } } }; }})(jquery);
3、index.HTML

<!DOCTYPE HTML><HTML><head> <Meta charset="utf⑻"> <Title>Image List</Title> <link rel="stylesheet" href="CSS/showimg.CSS"> <style> .container{ position: relative; text-align: center; margin-left: 25%; } </style> <script src="Js/jquery⑴.8.3.Js"></script> <script src="Js/jquery.showimg.Js"></script> <script> var imgurls = new Array( "img/demopage/image⑴.jpg","img/demopage/image⑵.jpg","img/demopage/image⑶.jpg","img/demopage/image⑷.jpg","img/demopage/image⑸.jpg" ); $(document).ready(function (){ $('#container').showimg({ imgurls:imgurls,wIDth:600,height:300,thumbHeight:100,autoplay:true }); }); </script></head><body><div ID="container" class="container"></div></body></HTML>
思路很简单，我相信大家看完代码就知道是甚么思路，希望对大家有所帮助，抛砖引玉。

下载地址

如有疑问，请联系：

QQ：1004740957

Emai：[email protected]

总结

以上是内存溢出为你收集整理的CSS+JS实现图片集展示（二）全部内容，希望文章能够帮你解决CSS+JS实现图片集展示（二）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。