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

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

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;
     100%;
    background: #48525e;
    opacity: 0.4;
    z-index: 10;
}
.modal{
    position: relative;
    z-index: 99;
    opacity: 1;
    top: 15%;
    left: 40%;
     600px;
    height: 400px;
}
.modal .title .tips-bg{
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #48525e;
     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;
     27px;
    height: 27px;
    position: absolute;
    top: 5px;
    right: 5px;
}
.modal .title .close:hover{
    cursor: pointer;
}
.container{
    position: absolute;
    top: 200px;
    text-align: center;
     100%;
    z-index: 5;
}
.image-list{
    margin-left: 40%;
    position: relative;
}
#prev{
    display: none;
     45px;
    height: 50px;
    background: url(../img/prev.png);
}
#next{
     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;
     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 = $("<div></div>").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 = $("<div></div>").addClass("page-num").html(imgIndex);
        divPageNum.appendTo(imgList);

        var divCtrl  = $("<div></div>").css("width","100%").css("height","100%").hide();
        var divPrev = $("<div></div>").attr("id","prev"),
            divNext = $("<div></div>").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<length;i++){
                $("#img"+(i+1)).addClass("thumb-a-hide");
            }
            $("#img"+imgIndex).removeClass("thumb-a-hide");
            divPageNum.html(imgIndex);
            if(imgIndex===length){
                $("#next").hide();
            }
            else{
                $("#next").show();
            }
            if(imgIndex===1){
                $("#prev").hide();
            }
            else{
                $("#prev").show();
            }
        });
        divNext.on("click",function(){
            if(imgIndex<length){
                imgIndex=imgIndex+1;
            }
            for(var i=0;i<length;i++){
                $("#img"+(i+1)).addClass("thumb-a-hide");
            }
            $("#img"+imgIndex).removeClass("thumb-a-hide");
            divPageNum.html(imgIndex);
            if(imgIndex===length){
                $("#next").hide();
            }
            else{
                $("#next").show();
            }
            if(imgIndex===1){
                $("#prev").hide();
            }
            else{
                $("#prev").show();
            }
        });
        divPrev.appendTo(divCtrl);
        divNext.appendTo(divCtrl);
        divCtrl.appendTo(imgList);
        imgList.appendTo(container);

        for(var i= 0;i<length;i++){
            var aImg = $("<a></a>").attr("id","img"+(i+1)).addClass("thumb-a");
            if(i>0){
                aImg.addClass("thumb-a-hide");
            }
            var img = $("<img height='"+thumbHeight+"' width='"+thumbWidth+"'/>").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 = $("<div></div>");
                modalBg.addClass("modal-bg");
                modalBg.appendTo($('body'));
                var modal = $("<div></div>");
                modal.addClass("modal");
                modal.css("position","absolute")
                    .css("top",(winHeight-detailHeight)/2+"px")
                    .css("left",(winWidth-detailWidth)/2+"px");
                var titleTipsBg = $("<div></div>").addClass("tips-bg");
                var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese.");
                var titleClose =  $("<a></a>").addClass("close");
                var title = $("<div></div>");
                title.addClass("title");
                title.append(titleTipsBg)
                    .append(titleTips)
                    .append(titleClose);
                titleClose.on("click",function(){
                    modalBg.hide();
                    modal.hide();
                });
                title.appendTo(modal);
                var img = $("<img />");
                img.attr("width",detailWidth)
                    .attr("height",detailHeight)
                    .attr("src","img/demopage/image-"+imgIndex+".jpg");
                var imgDiv = $("<div></div>").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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Image List</title>
    <link rel="stylesheet" href="css/imglist.css">
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery.imglist.js"></script>
    <script>
        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,
                thumb300,
                thumbheight:220,
                detail600,
                detailheight:400,
                autoplay:true
            });
        });
    </script>
</head>
<body>
<div id="container"></div>
</body>
</html>

源码下载