CSS JS realizes picture collection display (2)_html/css_WEB-ITnose

The title is the same as the two articles above, but the content is different from the previous two articles. In this article, the effect of the achieved picture set is:

1. Detailed picture Synchronous display with thumbnails;

2. Automatic playback of pictures;

3. Display of focus display of thumbnails of pictures and cover display of other pictures;

4. Move the mouse to the detailed picture display picture control control.

The specific renderings are as follows:

Initialization or first state

Intermediate state

Last state

This method of picture display is generally used in picture news or similar things. For example, the news on Baidu’s homepage is displayed in a similar way, as follows:

Baidu Home Page News

The code I implemented is posted below for your reference.

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>

The idea is very simple. I believe everyone will know what the idea is after reading the code. I hope it will be helpful to everyone and provide suggestions.

Download address

If you have any questions, please contact:

QQ: 1004740957

Emai: niujp08@qq.com