CSS+JS实现图片集展示(续)_html/css_WEB-ITnose
程序员文章站
2024-01-17 23:11:58
...
上一篇文章里,我们实现了图片集的展示,在本文,对上一篇文章的内容作了封装,实现效果上作了一些优化,具体的思路我就不再赘述,下面将我的代码贴出来,以供搭建参考。
2、jquery.imglist.js
3、imglist.html
源码下载
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 = $("").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 = $("").addClass("page-num").html(imgIndex); divPageNum.appendTo(imgList); var divCtrl = $("").css("width","100%").css("height","100%").hide(); var divPrev = $("").attr("id","prev"), divNext = $("").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").attr("id","img"+(i+1)).addClass("thumb-a"); if(i>0){ aImg.addClass("thumb-a-hide"); } var img = $("").addClass("thumb-img"); img .attr("src",imgUrls[i]); img.appendTo(aImg); aImg.appendTo(imgList); aImg.on("click",function(){ play = clearInterval(play); var winWidth = $(window).width(),winHeight = $(window).height(); var modalBg = $(""); modalBg.addClass("modal-bg"); modalBg.appendTo($('body')); var modal = $(""); modal.addClass("modal"); modal.css("position","absolute") .css("top",(winHeight-detailHeight)/2+"px") .css("left",(winWidth-detailWidth)/2+"px"); var titleTipsBg = $("").addClass("tips-bg"); var titleTips = $("").addClass("tips").html("I am a Chinese."); var titleClose = $("").addClass("close"); var title = $(""); title.addClass("title"); title.append(titleTipsBg) .append(titleTips) .append(titleClose); titleClose.on("click",function(){ modalBg.hide(); modal.hide(); }); title.appendTo(modal); var img = $(""); img.attr("width",detailWidth) .attr("height",detailHeight) .attr("src","img/demopage/image-"+imgIndex+".jpg"); var imgDiv = $("").append(img); imgDiv.appendTo(modal); modal.appendTo($('body')); }); } if(autoPlay){ play = setInterval(playImg,3000); } function playImg(){ if(imgIndex===length){ imgIndex=0; } divNext.click(); } }})(jQuery);
3、imglist.html
Image List
源码下载
上一篇: php入门教程单文件上传与多文件上传实例
推荐阅读
-
CSS+JS实现图片集展示(续)_html/css_WEB-ITnose
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
CSS+JS实现图片集展示_html/css_WEB-ITnose
-
两点还没睡觉的程序员,类似这样田字格格的展示,css 中间边框怎么实现合并_html/css_WEB-ITnose
-
CSS+JS实现tab标签切换_html/css_WEB-ITnose
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
CSS+JS实现图片集展示_html/css_WEB-ITnose
-
CSS+JS实现图片集展示(续)_html/css_WEB-ITnose