CSS+JSで画像コレクション表示を実現(2)_html/css_WEB-ITnose

タイトルは前の 2 つの記事と同じですが、この記事では、画像セットを表示する効果は次のとおりです。

1. 詳細な画像とサムネイルの同期表示。

2. 画像の自動再生

3. 画像のミニチュア表示と他の画像のカバー表示を表示します。

4. マウスを詳細画像表示コントロール コントロールに移動します。

具体的なレンダリングは次のとおりです:

初期化または最初の状態

中間状態

最終状態

この道の写真 続きですたとえば、Baidu のホームページのニュースも同様に表示されます。

Baidu のホームページ ニュース

参考までに、私が実装したコードを以下に掲載します。

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