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;
    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 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Arcgis for js实现北京地铁的展示

在chrom中输入地址http://map.baidu.com/subways/index.html?c=beijing

2624
来自专栏ios 技术积累

ios 一款集成方便的二维码扫描

做项目要用到二维码扫描,在git上搜索到了LBXScan开源库很不错,详细的可以下载demo,我只是使用了部分功能因此pod中只导入了

3022
来自专栏向治洪

Android 异步加载图片,使用LruCache和SD卡或手机缓存,效果非常的流畅

异步加载图片的例子,网上也比较多,大部分用了HashMap<String, SoftReference<Drawable>> imageCache ,但是现在已...

18810
来自专栏debugeeker的专栏

sedna进行xquery查询

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

821
来自专栏LinXunFeng的专栏

iOS - Swift 仿微信小红点(无数字)

1483
来自专栏Golang语言社区

Go中的依赖注入

I have written a small utility package to handle dependency injection in Go (it'...

2564
来自专栏浅探ARKit

ARKit中控制.dae动画的播放

4.用时间控制动画--CAAnimation 里的 timeOffset 控制开始时间 duration控制播放时间

7597
来自专栏Java成神之路

kylin_异常_01_java.io.FileNotFoundException: /developer/apache-kylin-2.3.0-bin/tomcat/conf/.keystore

kylin安装完,启动后,控制正常,kylin后台也能正常访问。但是去看kylin的日志,却发现报错了:

1905
来自专栏hotqin888的专栏

MeritMS+jQuery.Gantt价值管理系统增加项目进度展示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

2721
来自专栏lzj_learn_note

自定义无限循环ViewPager(三)――ViewPager方法改造实现无限循环

在前面两篇文章中,已经对ViewPager的实现原理有了分析,相信大家对于ViewPager的页面切换也有了一定的了解,接下来就是在ViewPager的基础上对...

3933

扫码关注云+社区

领取腾讯云代金券