CSS+JS實現圖片集展示(二)
阿新 • • 發佈:2019-01-09
題目與上面的兩篇文章有所重複,但是內容與上兩篇上有所區別,本文中,實現的圖片集展示的效果為:
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:[email protected]