CSS+JS实现图片集展示（二）_html/css_WEB-ITnose

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

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

2、图片的自动播放；

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

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

具体效果图如下：

初始化或者第一张状态

中间状态

最后一张状态

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

百度首页新闻

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

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: -110px;    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 = $("


      
查看更多关于CSS+JS实现图片集展示（二）_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did106769