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 相关文章推荐
javascript:void(0)的作用示例介绍
Oct 28 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
js cavans实现静态滚动弹幕
May 21 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
php+mysql分页代码详解
2008/03/27 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
php array的学习笔记
2012/05/16 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
js常用代码段收集
2011/10/28 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
python 实现插入排序算法
2012/06/05 Python
python简单实例训练(21~30)
2017/11/15 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
Golang 编译成DLL文件的操作
2021/05/06 Golang
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
java实现面板之间切换功能
2022/06/10 Java/Android