首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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"); 
} 
});

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
JS数组的常见用法实例
Feb 10 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
实例详解带参数的 npm script
May 28 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 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
IP(1) 递归(1) tcp/ip(1) 后端(1) 双人对弈(1) tokenizer(1) 限流(2) 内置模块(1) Parser(1) 限速(1)
You might like
php生成WAP页面
2006/10/09 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦：OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
python为什么要安装到c盘
2020/07/20 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
Sephora丝芙兰马来西亚官方网站：国际化妆品购物
2018/03/15 全球购物
Notino芬兰：购买香水和化妆品
2019/04/15 全球购物
丝芙兰意大利官方网站：Sephora.it
2019/12/13 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
军训自我鉴定200字
2014/02/13 职场文书
医院搬迁方案
2014/06/14 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
客房部经理岗位职责
2015/02/02 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
redis lua限流算法实现示例
2022/07/15 Redis