http://blog.csdn.net/gisshixisheng/article/details/42320613
题目与上面的两篇文章有所重复,但是内容与上两篇上有所区别,本文中,实现的图片集展示的效果为:
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>
- 大小: 355.7 KB
- 大小: 271.1 KB
分享到:
相关推荐
1、图片的展示与翻页; 2、点击图片放大图片。
PhotoSwipe是一个开发用于手机和Touch设备,功能强大的图片/照片集展示控件。它采用HTML、CSS+JavaScript实现,没有依赖任何JavaScript框架。 可以设置淡入/淡出的效果,激活放大功能,缩放图片等。PhotoSwipe支持...
Bootstrap + css3 实现响应式页面展示效果,一套代码实现多端展示 echarts图表数据展示,fullpage全屏页面,swiper轮播 百度地图加载 开发工具: Photoshop:ps图片处理,切片 Vscode:辅助编辑插件,浏览器打开,...
109:四屏切换JS广告代码下载 110:JavaScript图片切换效果 下载 111:在线客服代码 下载 112:单独关闭的两边悬挂代码下载 113:全屏可伸缩可关闭广告代码下载 114:四屏JS带缩略图的焦点图 下载 115:书角带阴影的...
【材料】:d3.js的模块的思维导图,图片形式 【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何...
【材料】:d3.js的API思维导图,图片形式 【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架...
这份346套响应式HTML源码合集是前端开发者的宝贵财富,它涵盖了登录注册界面、表单录入模板、精致的按钮样式以及图片展示等关键组件。这些模板基于现代Web技术精心打造,旨在帮助开发人员快速构建功能完备且外观专业...
109:四屏切换JS广告代码下载 110:JavaScript图片切换效果 下载 111:在线客服代码 下载 112:单独关闭的两边悬挂代码下载 113:全屏可伸缩可关闭广告代码下载 114:四屏JS带缩略图的焦点图 下载 115:书角带阴影的...
flash xml图片集查看效果,可作为图片展示来用哦,包含了完整的实例文件,结合了HTML JavaScript CSS技术以及XML综合实现了这款Flash相册,Flash动画内运用了滑动特效,整体效果流畅,用户体验不错。
- 前端:大量运用JavaScript实现动态交互效果,辅以CSS进行页面样式设计; - 后端:采用Java编写业务逻辑,利用Spring框架进行项目管理,SpringMVC处理请求映射,MyBatis作为数据持久化层; - 配置文件:使用XML进行...
1. 商品展示:系统提供了详细的茶叶介绍页面,包含图片、描述、价格等,方便用户浏览选购。 2. 购物车与订单管理:用户可以将喜欢的商品加入购物车,并进行订单的生成、查看和管理。 3. 用户认证:通过微信授权登录...
- 图片资源:86个.png文件,用于界面展示和图标设计 - 配置文件:84个.xml文件,包括Spring配置、MyBatis映射等 - Vue组件:76个.vue文件,构建了前端的单页面应用 - JavaScript文件:44个.js文件,实现了动态...
轮播图是网页设计中常用的元素,用于展示多个图片或内容,并实现自动切换和交互效果。 该源码文件使用HTML、CSS和JavaScript设计多套精美的轮播图效果,例如全屏滚动轮播图、前后可拖拽轮播图、立体轮播图等等,帮助...
图集(展示方式突出显示图片集,可用作相册) 页面(独立页面,不会在默认列表中展示链接,也不存在于存档中,可以通过导航菜单功能将其展示出来,例如:展示个人档) 正文语法高亮,使用Syntax Highlighter 组件...
Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...
在外观和格式控制上,采用DHTM以及CSS样式表来实现。 2. 源代码(见附录1) 第六部分 软件测试与调试 1. 测试环境与测试方法 本系统在Windows系统 IIS环境下测试。 在测试过程中,首先...
标签管理:添加标签、标签数据维护(图片、URI、CSS、描述等) 保留词管理:添加保留词、保留词数据维护 邀请码管理:生成邀请码、邀请码数据维护 广告管理:侧边栏独占展位维护 其他管理:发帖/回帖开关;用户...
实例184 应用CSS+DIV实现无边框窗口 222 实例185 设置表格样式 224 实例186 设置图片的样式 225 实例187 滚动条样式 226 实例188 设置表单样式 227 实例189 设置超链接的样式 229 实例190 设置body的样式 230 实例...
实例184 应用CSS+DIV实现无边框窗口 222 实例185 设置表格样式 224 实例186 设置图片的样式 225 实例187 滚动条样式 226 实例188 设置表单样式 227 实例189 设置超链接的样式 229 实例190 设置body的样式 230 实例...
学完了这阶段课程,学员将学会开发主流网站的前端效果,比如:焦点图、滚动展示图、网页防复制、网页自定义菜单、WebOS、美女时钟、无刷新评论、评分控件、表格特效、图片悬浮详细信息、微博界面、QQ消息框效果、Div...