欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS+JS实现图片集展示(二)_html/css_WEB-ITnose

程序员文章站 2022-03-31 19:37:38
...
题目与上面的两篇文章有所重复,但是内容与上两篇上有所区别,本文中,实现的图片集展示的效果为:

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 = $("").addClass("detail-div").appendTo(container);        var ctrlDiv = $("").appendTo(detailDiv).hide();        var prevA = $("").attr("id","prev").appendTo(ctrlDiv).hide(),            nextA = $("").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 = $("").appendTo(detailDiv);        var detailImg = $("CSS+JS实现图片集展示(二)_html/css_WEB-ITnose").attr("id","detailImg")            .attr("width",width)            .attr("height",height)            .attr("src","img/demopage/image-"+imgIndex+".jpg")            .appendTo(detailImgA);        /**         * 缩影图片         */        var thumbDiv = $("").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