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

来源：互联网发布：淘宝客网站源码那个好编辑：程序博客网时间：2024/05/01 23:40

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

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 = $("<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,                thumbwidth:300,                thumbheight:220,                detailwidth:600,                detailheight:400,                autoplay:true            });        });    </script></head><body><div id="container"></div></body></html>

源码下载

0 0