CSS+JS实现图片集展示(二)_html/css_WEB-ITnose
程序员文章站
2022-03-31 19:37:38
...
题目与上面的两篇文章有所重复,但是内容与上两篇上有所区别,本文中,实现的图片集展示的效果为:
2、juqery.showimg.js
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 = $("").addClass("detail-div").appendTo(container); var ctrlDiv = $("").appendTo(detailDiv).hide(); var prevA = $("").attr("id","prev").appendTo(ctrlDiv).hide(), nextA = $("").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 = $("").appendTo(detailDiv); var detailImg = $("").attr("id","detailImg") .attr("width",width) .attr("height",height) .attr("src","img/demopage/image-"+imgIndex+".jpg") .appendTo(detailImgA); /** * 缩影图片 */ var thumbDiv = $("").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
上一篇: Laravel框架中IOC容器的用法详解
下一篇: Nginx搭建反向代理服务器过程详解
推荐阅读
-
纯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
-
二级环绕菜单效果实现_html/css_WEB-ITnose
-
CSS+JS实现图片集展示(续)_html/css_WEB-ITnose