CSS+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 = $("<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

CSS+JS实现图片集展示（二）相关推荐

web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
HTML+CSS+JS网页设计期末课程大作业——多用途的图文展示博客HTML模板(16页) 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码...
HTML5期末大作业:个人博客网站设计--多用途的图文展示博客HTML模板(16页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计 ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...
HTML5七夕情人节表白网页_(唯美满天星)多功能展示(网状球状)3D相册_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册
HTML5七夕情人节表白网页_(唯美满天星)多功能展示(网状球状)3D相册_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花 ...
CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
HTML+CSS+JS案例展示(跟随鼠标移动的小人)
参考来源: JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili ...
html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点本 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

CSS+JS实现图片集展示（二）

CSS+JS实现图片集展示（二）相关推荐

最新文章

热门文章