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 = $("
").addClass("image-list").css("width",thumbWidth+"px");        $(".image-list").live("mouseenter",function(){            play = clearInterval(play);            divCtrl.show();        });        $(".image-list").live("mouseleave",function(){            play = setInterval(playImg,3000);            divCtrl.hide();        });        var divPageNum = $("
").addClass("page-num").html(imgIndex);        divPageNum.appendTo(imgList);        var divCtrl  = $("
").css("width","100%").css("height","100%").hide();        var divPrev = $("
").attr("id","prev"),            divNext = $("
").attr("id","next");        divPrev.css("position","absolute"),        divNext.css("position","absolute");        divPrev.css("top",(thumbHeight/2-25)+"px"),        divNext.css("top",(thumbHeight/2-25)+"px");        divPrev.css("left","-10px"),        divNext.css("right","-12px");        divPrev.on("click",function(){            if(imgIndex>1){                imgIndex=imgIndex-1;            }            for(var i=0;i").attr("id","img"+(i+1)).addClass("thumb-a");            if(i>0){                aImg.addClass("thumb-a-hide");            }            var img = $("@@##@@").addClass("thumb-img");            img .attr("src",imgUrls[i]);            img.appendTo(aImg);            aImg.appendTo(imgList);            aImg.on("click",function(){                play = clearInterval(play);                var winWidth = $(window).width(),winHeight = $(window).height();                var modalBg = $("
");                modalBg.addClass("modal-bg");                modalBg.appendTo($('body'));                var modal = $("
");                modal.addClass("modal");                modal.css("position","absolute")                    .css("top",(winHeight-detailHeight)/2+"px")                    .css("left",(winWidth-detailWidth)/2+"px");                var titleTipsBg = $("
").addClass("tips-bg");                var titleTips = $("").addClass("tips").html("I am a Chinese.");                var titleClose =  $("").addClass("close");                var title = $("
");                title.addClass("title");                title.append(titleTipsBg)                    .append(titleTips)                    .append(titleClose);                titleClose.on("click",function(){                    modalBg.hide();                    modal.hide();                });                title.appendTo(modal);                var img = $("@@##@@");                img.attr("width",detailWidth)                    .attr("height",detailHeight)                    .attr("src","img/demopage/image-"+imgIndex+".jpg");                var imgDiv = $("
").append(img);                imgDiv.appendTo(modal);                modal.appendTo($('body'));            });        }        if(autoPlay){            play = setInterval(playImg,3000);        }        function playImg(){            if(imgIndex===length){                imgIndex=0;            }            divNext.click();        }    }})(jQuery);

登录后复制
3、imglist.html

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

            var imgUrls = new Array(            "img/demopage/thumb-1.jpg",            "img/demopage/thumb-2.jpg",            "img/demopage/thumb-3.jpg",            "img/demopage/thumb-4.jpg",            "img/demopage/thumb-5.jpg"        );        $(document).ready(function (){            $('#container').imgList({                imgurls:imgUrls,                thumbwidth:300,                thumbheight:220,                detailwidth:600,                detailheight:400,                autoplay:true            });        });    

登录后复制
源码下载

立即学习“前端免费学习笔记（深入）”；