CSS + JS enables image set display (continued) and css image set
In the previous article, we implemented the display of image sets. In this article, we encapsulated the content of the previous article and optimized the effects. I will not go into details about the specific ideas, below I will post my code for reference.
1、imglist.css
html, body, .modal-bg { height: 100%; margin: 0; padding: 0; font-size: 13px; font-weight: bold; color: #fff;}.modal-bg{ position: absolute; left: 0px; top: 0px; width: 100%; background: #48525e; opacity: 0.4; z-index: 10;}.modal{ position: relative; z-index: 99; opacity: 1; top: 15%; left: 40%; width: 600px; height: 400px;}.modal .title .tips-bg{ position: absolute; bottom: 0px; left: 0px; background: #48525e; width: 100%; height: 50px; opacity: 0.8;}.modal .title .tips{ position: absolute; bottom: 13px; left: 10px; font-family: "Arial"; font-weight: bold; font-size: 20px;}.modal .title .close{ background: url(../img/close.png) no-repeat; width: 27px; height: 27px; position: absolute; top: 5px; right: 5px;}.modal .title .close:hover{ cursor: pointer;}.container{ position: absolute; top: 200px; text-align: center; width: 100%; z-index: 5;}.image-list{ margin-left: 40%; position: relative;}#prev{ display: none; width: 45px; height: 50px; background: url(../img/prev.png);}#next{ width: 45px; height: 50px; background: url(../img/next.png);}#prev:hover,#next:hover{ cursor: pointer;}.page-num{ position: absolute; right: 8px; bottom: 15px; border: 2px solid #fff; font-weight: bold; background: #666666; color: #fff; border-radius:15px; text-align: center; padding: 3px; width: 15px; font-size: 13px;}.thumb-a{ 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-a:hover{ background-color:#4ae; cursor: pointer;}.thumb-a-hide{ display: none;}.thumb-img{ -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px}
2. jquery. imglist. js
(function($){ $.fn.imgList = function(options){ var defaults = {}; var options = $.extend(defaults, options); var container=$(this); var imgUrls = options.imgurls; var autoPlay = options.autoplay; var thumbWidth = options.thumbwidth, thumbHeight = options.thumbheight, detailWidth = options.detailwidth,detailHeight = options.detailheight; var length,imgIndex=1; length = imgUrls.length; var play; var imgList = $("<div></div>").addClass("image-list").css("width",thumbWidth+"px"); $(".image-list").live("mouseenter",function(){ play = clearInterval(play); divCtrl.show(); }); $(".image-list").live("mouseleave",function(){ play = setInterval(playImg,3000); divCtrl.hide(); }); var divPageNum = $("<div></div>").addClass("page-num").html(imgIndex); divPageNum.appendTo(imgList); var divCtrl = $("<div></div>").css("width","100%").css("height","100%").hide(); var divPrev = $("<div></div>").attr("id","prev"), divNext = $("<div></div>").attr("id","next"); divPrev.css("position","absolute"), divNext.css("position","absolute"); divPrev.css("top",(thumbHeight/2-25)+"px"), divNext.css("top",(thumbHeight/2-25)+"px"); divPrev.css("left","-10px"), divNext.css("right","-12px"); divPrev.on("click",function(){ if(imgIndex>1){ imgIndex=imgIndex-1; } for(var i=0;i<length;i++){ $("#img"+(i+1)).addClass("thumb-a-hide"); } $("#img"+imgIndex).removeClass("thumb-a-hide"); divPageNum.html(imgIndex); if(imgIndex===length){ $("#next").hide(); } else{ $("#next").show(); } if(imgIndex===1){ $("#prev").hide(); } else{ $("#prev").show(); } }); divNext.on("click",function(){ if(imgIndex<length){ imgIndex=imgIndex+1; } for(var i=0;i<length;i++){ $("#img"+(i+1)).addClass("thumb-a-hide"); } $("#img"+imgIndex).removeClass("thumb-a-hide"); divPageNum.html(imgIndex); if(imgIndex===length){ $("#next").hide(); } else{ $("#next").show(); } if(imgIndex===1){ $("#prev").hide(); } else{ $("#prev").show(); } }); divPrev.appendTo(divCtrl); divNext.appendTo(divCtrl); divCtrl.appendTo(imgList); imgList.appendTo(container); for(var i= 0;i<length;i++){ var aImg = $("<a></a>").attr("id","img"+(i+1)).addClass("thumb-a"); if(i>0){ aImg.addClass("thumb-a-hide"); } var img = $("</div>"); modalBg.addClass("modal-bg"); modalBg.appendTo($('body')); var modal = $("<div></div>"); modal.addClass("modal"); modal.css("position","absolute") .css("top",(winHeight-detailHeight)/2+"px") .css("left",(winWidth-detailWidth)/2+"px"); var titleTipsBg = $("<div></div>").addClass("tips-bg"); var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese."); var titleClose = $("<a></a>").addClass("close"); var title = $("<div></div>"); title.addClass("title"); title.append(titleTipsBg) .append(titleTips) .append(titleClose); titleClose.on("click",function(){ modalBg.hide(); modal.hide(); }); title.appendTo(modal); var img = $("</div>").append(img); imgDiv.appendTo(modal); modal.appendTo($('body')); }); } if(autoPlay){ play = setInterval(playImg,3000); } function playImg(){ if(imgIndex===length){ imgIndex=0; } divNext.click(); } }})(jQuery);
3366imglist.html
<!DOCTYPE html>
Source code download