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

上一篇文章里，我们实现了图片集的展示，在本文，对上一篇文章的内容作了封装，实现效果上作了一些优化，具体的思路我就不再赘述，下面将我的代码贴出来，以供搭建参考。

1、imglist.css

html, body, .modal-bg {    height: 100%;    margin: 0;    padding: 0;    font-size: 13px;    font-weight: bold;    color: #fff;}.modal-bg{    position: absolute;    left: 0px;    top: 0px;    width: 100%;    background: #48525e;    opacity: 0.4;    z-index: 10;}.modal{    position: relative;    z-index: 99;    opacity: 1;    top: 15%;    left: 40%;    width: 600px;    height: 400px;}.modal .title .tips-bg{    position: absolute;    bottom: 0px;    left: 0px;    background: #48525e;    width: 100%;    height: 50px;    opacity: 0.8;}.modal .title .tips{    position: absolute;    bottom: 13px;    left: 10px;    font-family: "Arial";    font-weight: bold;    font-size: 20px;}.modal .title .close{    background: url(img/close.png) no-repeat;    width: 27px;    height: 27px;    position: absolute;    top: 5px;    right: 5px;}.modal .title .close:hover{    cursor: pointer;}.container{    position: absolute;    top: 200px;    text-align: center;    width: 100%;    z-index: 5;}.image-list{    margin-left: 40%;    position: relative;}#prev{    display: none;    width: 45px;    height: 50px;    background: url(img/prev.png);}#next{    width: 45px;    height: 50px;    background: url(img/next.png);}#prev:hover,#next:hover{    cursor: pointer;}.page-num{    position: absolute;    right: 8px;    bottom: 15px;    border: 2px solid #fff;    font-weight: bold;    background: #666666;    color: #fff;    border-radius:15px;    text-align: center;    padding: 3px;    width: 15px;    font-size: 13px;}.thumb-a{    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-a:hover{    background-color:#4ae;    cursor: pointer;}.thumb-a-hide{    display: none;}.thumb-img{    -webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px;    border-radius:5px} 

2、jquery.imglist.js

(function($){    $.fn.imgList = function(options){        var defaults = {};        var options = $.extend(defaults, options);        var container=$(this);        var imgUrls = options.imgurls;        var autoPlay = options.autoplay;        var thumbWidth = options.thumbwidth, thumbHeight = options.thumbheight,            detailWidth = options.detailwidth,detailHeight = options.detailheight;        var length,imgIndex=1;        length = imgUrls.length;        var play;        var imgList = $("


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

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