CSS+JS实现图片集展示(二)

题目与上面的两篇文章有所重复,但是内容与上两篇上有所区别,本文中,实现的图片集展示的效果为:

1、详细图和缩略图的同步展示;

2、图片的自动播放;

3、显示图片的缩影图的焦点显示与别的图片的遮盖显示;

4、鼠标移动至详图显示图片控制控件。

具体效果图如下:

初始化或者第一张状态

中间状态

最后一张状态

这种方式的图片展示一般用的图片新闻或者类似的东西中比较常见,例如百度首页的新闻就是用类似的方式来展示的,如下:

百度首页新闻

下面将我实现的代码贴出来,以供大家参考。

1、showimg.css

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
#prev{
    position: absolute;
    top: 125px;
    left: 0px;
    width: 45px;
    height: 50px;
    background: url(../img/prev.png);
}
#next{
    position: absolute;
    top: 125px;
    right: 0px;
    width: 45px;
    height: 50px;
    background: url(../img/next.png);
}
#prev:hover,#next:hover{
    cursor: pointer;
}
.detail-div{
    position: relative;
    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-div{
    position: absolute;
    bottom: -110px;
    left: 4px;
    background: #555;
}
.thumb{
    margin-left: 7px;
    margin-top: 5px;
    margin-bottom: 5px;
    float: left;
    position: relative;
}
.thumb-img{
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px
}
.thumb-active{
    border: 2px solid #fff;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    height: 100px;
}
.thumb-modal{
    background: #141414;
    opacity: 0.5;
    filter:alpha(opacity=50);
    position: absolute;
    left: 0px;
    bottom: 2px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.thumb-modal-hide{
    display: none;
}

2、juqery.showimg.js

(function($){
    $.fn.showImg = function(options){
        var defaults = {};
        var options = $.extend(defaults, options);
        var container=$(this);
        var imgUrls = options.imgUrls;
        var width = options.width,height = options.height,thumbHeight = options.thumbHeight;
        var autoPlay = options.autoplay;

        container.css("width",width+"px");

        var imgIndex = 1,length = imgUrls.length;
        var play;

        /**
         * 图片详情
         */
        var detailDiv = $("<div></div>").addClass("detail-div").appendTo(container);

        var ctrlDiv = $("<div></div>").appendTo(detailDiv).hide();
        var prevA = $("<a></a>").attr("id","prev").appendTo(ctrlDiv).hide(),
            nextA = $("<a></a>").attr("id","next").appendTo(ctrlDiv);

        $(".detail-div").live("mouseenter",function(){
            play = clearInterval(play);
            ctrlDiv.show();
        });
        $(".detail-div").live("mouseleave",function(){
            play = setInterval(playImg,3000);
            ctrlDiv.hide();
        });

        var detailImgA = $("<a></a>").appendTo(detailDiv);
        var detailImg = $("<img />").attr("id","detailImg")
            .attr("width",width)
            .attr("height",height)
            .attr("src","img/demopage/image-"+imgIndex+".jpg")
            .appendTo(detailImgA);

        /**
         * 缩影图片
         */
        var thumbDiv = $("<div></div>").addClass("thumb-div")
            .appendTo(container)
            .css("width",width+"px");
        addThumbImgs();

        prevA.on("click",function(){
            imgCtrlFun("prev");
        });
        nextA.on("click",function(){
            imgCtrlFun("next");
        });

        if(autoPlay){
            play = setInterval(playImg,3000);
        }
        function playImg(){
            if(imgIndex===length){
                imgIndex=0;
            }
            nextA.click();
        }
        /**
         * 图片控制
         * @param type
         */
        function imgCtrlFun(type){
            if(type==="prev"){
                if(imgIndex>1){
                    imgIndex= imgIndex-1;
                }
            }
            else{
                if(imgIndex<length){
                    imgIndex= imgIndex+1;
                }
            }
            $("#detailImg").attr("src","img/demopage/image-"+imgIndex+".jpg");
            thumbDiv.html("");
            addThumbImgs();
            if(imgIndex===length){
                $("#next").hide();
            }
            else{
                $("#next").show();
            }
            if(imgIndex===1){
                $("#prev").hide();
            }
            else{
                $("#prev").show();
            }
        };
        /**
         * 添加图片缩影
         */
        function addThumbImgs(){
            var thumbWidth = width/3-10;
            for(var i=imgIndex-2;i<imgIndex+1;i++){
                var thumb = $("<div></div>").addClass("thumb").appendTo(thumbDiv);
                var thumbModalDiv = $("<div></div>").addClass("thumb-modal").appendTo(thumb);
                thumbModalDiv.css("height",thumbHeight+"px")
                    .css("width",thumbWidth+"px");
                var thumbImg = $("<img />").attr("id","thumb"+(i+1))
                    .attr("width",thumbWidth)
                    .attr("height",thumbHeight)
                    .addClass("thumb-img")
                    .appendTo(thumb);
                if(!(i<0)){
                    thumbImg.attr("src",imgUrls[i]);
                }
                if(i===imgIndex-1){
                    thumb.addClass("thumb-active");
                    thumbModalDiv.addClass("thumb-modal-hide");
                }
            }
        };
    }
})(jQuery);

3、index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Image List</title>
    <link rel="stylesheet" href="css/showimg.css">
    <style>
        .container{
            position: relative;
            text-align: center;
            margin-left: 25%;
        }
    </style>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery.showimg.js"></script>
    <script>
        var imgUrls = new Array(
            "img/demopage/image-1.jpg",
            "img/demopage/image-2.jpg",
            "img/demopage/image-3.jpg",
            "img/demopage/image-4.jpg",
            "img/demopage/image-5.jpg"
        );
        $(document).ready(function (){
            $('#container').showImg({
                imgUrls:imgUrls,
                width:600,
                height:300,
                thumbHeight:100,
                autoplay:true
            });
        });
    </script>
</head>
<body>
<div id="container" class="container"></div>
</body>
</html>

思路很简单,我相信大家看完代码就知道是什么思路,希望对大家有所帮助,抛砖引玉。

下载地址

如有疑问,请联系:

QQ:1004740957

Emai:niujp08@qq.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

web前端学习:HTML5十个新特性

                   :刻度尺/度量衡,描述数据所处的阶段,红色(危险)=>黄色(警告)=>绿色(优秀)

21810
来自专栏编程

前端面试三 新的一周

哈哈哈 1. 对WEB标准以及W3C的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下...

29300
来自专栏ThoughtWorks

使用Enzyme测试React(Native)组件|洞见

组件化与UI测试 在组件化出现之前,我们不谈UI的单元测试,哪怕是对于UI页面进行测试都是一件非常困难的事情。其实组件化并不完全是为了复用,很多情况下也恰恰是为...

34440
来自专栏前端说吧

CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

34180
来自专栏程序员的碎碎念

你用JavaGUI做的课程设计是这样子的吗?

很多人学完《Java基础教程》后,接着一般都会用GUI来做一下课程设计,多数同学通常选择用插件WindowBuilder来设计程序的界面,认为用插件做会更快更...

55780
来自专栏DeveWork

巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“com...

26080
来自专栏谦谦君子修罗刀

React Native备课笔记Day01一、React Native介绍二、特点分析三、推荐网站以及运行第一个react native项目四、环境搭建五、React Native文件结构六、View

(本节包括React Native介绍、特点分析、环境搭建、RN文件结构、View组件讲解、FlexBox布局及props与state) 一、React Nat...

368110
来自专栏理论坞

那些你不知道的Photoshop冷知识⑤——CC2015评测专题

笔者在探索新版本时,首先注意的便是首选项的变化,可以发现这次更新之后首选项侧边栏多了不少东西,点进去之后才发现原来是进行了重新分类,那么有哪些好玩的功能呢?介绍...

11840
来自专栏哲学驱动设计

技术总结:自动扩张WPF树型表格列宽

问题描述     今天测试人员提了一个易用性的BUG,主要是说系统目前使用的树型控件不支持自动扩张列的宽度。其实客户那边已经对这个问题提了多次,不过由于对WPF...

26750
来自专栏前端知识分享

第140天:前端开发中浏览器兼容性问题总结(一)

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本...

1.9K30

扫码关注云+社区

领取腾讯云代金券