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 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP多线程类及用法实例
2014/12/03 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python 中的int()函数怎么用
2017/10/17 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python Celery多队列配置代码实例
2019/11/22 Python
tensorflow自定义激活函数实例
2020/02/04 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
个人找工作的自我评价
2013/10/17 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
产品生产计划书
2014/05/07 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
设置IIS Express并发数
2022/07/07 Servers