jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)


Posted in Javascript onJanuary 23, 2013

demo04.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>手动滚动图片</title> 
<style type="text/css"> 
ul,li{margin:0;padding:0} 
img{border:0px;} 
#container{padding:40px;} 
#showArea img{width:700px;} 
a{text-decoration:none;border:0px;} 
#scrollDiv{border:#ccc 1px solid;} 
#scrollDiv li{background:#A83;} 
</style> 
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="manualScroll-0.1.4.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ $.manualScroll({ 
objId:"scrollDiv", 
showArea:"showArea", 
showTitle: true, 
height:105, 
width:140, 
line:5, 
speed:1000 
}); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
<div id="showArea"></div> 
<div id="scrollDiv"> 
<ul> 
<li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="140"/></a></li> 
<li><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="140"/></a></li> 
</ul> 
</div> 
</div> 
</body> 
</html>

manualScroll-0.1.4.js
/** 
* 手动滚动图片 
* 
**/ 
$.extend({ 
manualScroll:function(opt,callback){ 
//alert("suc"); 
this.defaults = { 
objId:"", // 滚动区域id 
showArea:"", // 大图显示区域id,如果没有就不显示 
showWidth:700, // 大图宽度 
showHeight:525, // 大图高度 
showTitle: false, // 是否在大图下方显示标题 
width:300, // 每行的宽度 
height:100, // div的高度 
line:2, // 每次滚动的行数 
autoLine:1, // 自动滚动的行数 
speed:0, // 动作时间 
interval:3000, // 滚动间隔 
imgPath:"", // 图片根目录 
directBtn:"img/direct_btn02.png", // 指向图片 
picTimer:0, // 间隔句柄,不需要设置,只是作为标识使用 
opacity:0.3 // 按钮透明度 
}; //参数初始化 
var opts = $.extend(this.defaults,opt); 
// 定义外层元素样式 
$("#"+opts.objId).css({ 
"position":"relative", 
"overflow":"hidden", 
"width":(opts.line * opts.width) + "px" 
}); 
// 定义ul样式 
$("#"+opts.objId + " ul").css({ 
"width":opts.width * $("#"+opts.objId + " ul").find("li").size() + "px", 
"height":opts.height + "px" 
}); 
// 定义li样式 
$("#"+opts.objId + " ul li").css({ 
"display":"block", 
"float":"left", 
"width":opts.width + "px", 
"height":opts.height + "px" 
}); 
// 添加向左滚动按钮 
$("#"+opts.objId).append("<div id=\"button_left\"></div>"); 
// 定义向左按钮的位置 
$("#button_left").css({ 
"width":"40px", 
"height":"40px", 
"background":"url(" + opts.imgPath + opts.directBtn + ")", 
"background-position":"0px 0px", 
"position":"absolute", 
"left":"0px", 
"top":(opts.height/2 - 20) + "px" 
}); 
// 添加向右滚动按钮 
$("#"+opts.objId).append("<div id=\"button_right\"></div>"); 
// 定义向右按钮的位置 
$("#button_right").css({ 
"width":"40px", 
"height":"40px", 
"background":"url(" + opts.imgPath + opts.directBtn + ")", 
"background-position":"-40px 0px", 
"position":"absolute", 
"left":(opts.line * opts.width - 40) + "px", 
"top":(opts.height/2 - 20) + "px" 
}); 
// 向左按钮添加动作 
$("#button_left").click(function(){ 
var scrollWidth = 0 - opts.line * opts.width - (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px","")); 
// 无间断滚动 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},opts.speed,function(){ 
for(i=1;i<=opts.line;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
showArea(); 
}); 
}); 
// 向右按钮添加动作 
$("#button_right").click(function(){ 
var scrollWidth = (0 - opts.line*opts.width + (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px",""))); 
// 无间断滚动 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},0,function(){ 
for(i=1;i<=opts.line;i++){ 
$("#"+opts.objId).find("li:last").prependTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:0 
},opts.speed,function(){ 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
showArea(); 
}); 
}); 
}); 
/** 
* 自动横向滚动 
*/ 
function scrollLeft(){ 
var scrollWidth = 0 - opts.autoLine * opts.width - (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px","")); 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},opts.speed,function(){ 
for(i=1;i<=opts.autoLine;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
showArea(); 
}); 
}; 
/** 
* 大图下方显示标题 
*/ 
if(opts.showTitle && $("#"+opts.showArea).size() > 0){ 
$("#"+opts.showArea).css({ 
"width":opts.showWidth + "px", 
"position":"relative", 
"height":opts.showHeight + "px" 
}); 
$("#"+opts.showArea).html("<img />"); 
$("#"+opts.showArea).append("<div id=\"manualScroll_banner\" ></div>"); 
$("#manualScroll_banner").css({ 
"width":opts.showWidth + "px", 
"height":"20px", 
"background":"#333", 
"position":"absolute", 
opacity:0.7, 
"text-align":"center", 
"color":"#FFF", 
"left":"0px", 
"top":(opts.showHeight - 20) + "px" 
}); 
} 
/** 
* 在指定区域显示大图 
*/ 
function showArea(){ 
if($("#"+opts.showArea).size() > 0){ 
// 显示主图的位置 
var index = Math.floor((opts.line - 1) / 2); 
showIndexArea(index); 
// 鼠标划上后显示大图 
$("#"+opts.objId + " ul li").each(function(index){ 
$(this).mouseover(function(){ 
showIndexArea(index); 
}); 
}); 
} 
} 
/** 
* 显示指定元素的大图 
*/ 
function showIndexArea(index){ 
var imgSrc = $("#"+opts.objId + " ul li:eq(" + index + ") img:first").attr("src"); 
var imgAlt = $("#"+opts.objId + " ul li:eq(" + index + ") img:first").attr("alt"); 
// 淡化显示其余图片 
$("#"+opts.objId + " ul li:lt(" + index + ")").css({ 
opacity:0.5 
}); 
$("#"+opts.objId + " ul li:gt(" + index + ")").css({ 
opacity:0.5 
}); 
$("#"+opts.objId + " ul li:eq(" + index + ")").css({ 
opacity:1 
}); 
// 显示大图 
$("#"+opts.showArea + " img:first").attr("src", imgSrc); 
// 显示标题 
if(opts.showTitle){ 
$("#manualScroll_banner").text(imgAlt); 
} 
} 
/** 
* 鼠标滑上后显示按钮 
*/ 
$("#"+opts.objId).hover(function() { 
$("#button_left").css({ 
opacity:1 
}); 
$("#button_right").css({ 
opacity:1 
}); 
},function() { 
$("#button_left").css({ 
opacity:opts.opacity 
}); 
$("#button_right").css({ 
opacity:opts.opacity 
}); 
}).trigger("mouseleave"); 
/** 
* 最先执行的函数 
* 鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 
*/ 
// 初始化大图 
showArea(); 
$("#"+opts.objId).hover(function() { 
clearInterval(opts.picTimer); 
},function() { 
opts.picTimer = setInterval(function() { 
scrollLeft(); 
},opts.interval); // 自动播放的间隔,单位:毫秒 
}).trigger("mouseleave"); 
} 
});
Javascript 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
Js四则运算函数代码
Jul 21 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
详解jQuery中的事件
Dec 14 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 #Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 #Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 #Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 #Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 #Javascript
js jquery验证银行卡号信息正则学习
Jan 21 #Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 #Javascript
You might like
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
一段防盗连的PHP代码
2006/12/06 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
小程序自定义日历效果
2018/12/29 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
python脚本第一行如何写
2020/08/30 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
自我鉴定书范文
2013/10/02 职场文书
全神贯注教学反思
2014/02/03 职场文书
警示教育活动总结
2014/05/05 职场文书
死亡诗社观后感
2015/06/05 职场文书
务工证明怎么写
2015/06/18 职场文书
应收账款管理制度
2015/08/06 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis