封装了一个js图片轮换效果的函数


Posted in Javascript onSeptember 28, 2011

其中如果有问题,有更好的意见或者建议都可在最后留言,都将对您感激不尽。
具体的代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 
<title>图片轮换效果</title> 
<style type="text/css"> 
body, div { margin: 0; paading: 0; font-size: 12px; } 
ul, li { margin: 0; padding: 0; list-style: none; } 
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; } 
.left { float: left; } 
.right { float: right; } 
ul, li { margin: 0; padding: 0; list-style: none; } 
.box { width: 960px; margin: 0 auto; padding-top: 15px; } 
.flash { position: relative; width: 360px; height: 280px; overflow: hidden; } 
.list { position: relative; width: 360px; height: 260px; overflow: hidden; } 
.list li img{ position: absolute; left: 0; top: 0; width: 360px; height: 260px;} 
.list li { display: none; } 
.list .over { display: block;} 
.btn { position: absolute; top: 233px; width: 360px; height: 26px; background: #000; line-height: 26px; opacity: 0.7; filter: alpha(opacity=70); text-align: right; } 
.btn a { padding: 2px 5px; margin: 0 2px; border: 1px solid #fff; border-radius: 2px; background: #000; color: #fff; text-decoration: none; cursor: pointer; } 
.btn .over { background: #f00; } 
.btn2 { position: absolute; top: 206px; height:62px; } 
.btn2 img { width: 70px; height: 60px; border: 1px solid #ccc; } 
.btn2 .over img { border: 1px solid #f00; } 
.flash2 { position: relative; width: 800px; } 
.flash2 .list { float: left; } 
.flash2 .btn2 { float: left; position: static; width: 150px; height: 280px; } 
.flash2 .btn2 img { width: 120px; height: 47px; } 
</style> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="scroll.js"> 
var autoPlay = { 
setTimeShow: function(showObj, btnObj, showClass, timer) { 
var length = btnObj.length; 
var timeId = null; 
var index = 0; 
if(showObj.length == btnObj.length) { 
timeId = window.setInterval(function(){ 
index = autoPlay.showCon(showObj, btnObj, showClass, index); //返回操作后的index 
}, timer); 
} else if (length == 1) { 
clearInterval(timeId); // 如果只有一张图片,则清除计时器,停止自动播放。 
} else { 
return false; 
} 
// 鼠标点击的操作。 
btnObj.each(function(i) { 
$(this).click(function() { 
$(this).addClass(showClass); 
btnObj.not($(this)).removeClass(showClass); 
showObj.eq(i).show('slow'); 
showObj.not(showObj.eq(i)).hide(); 
index = i; 
}); 
}); 
}, 
//自动轮换显示 
showCon: function(show, btnObj, showClass, index) { 
btnObj.eq(index).addClass(showClass); 
btnObj.not(btnObj.eq(index)).removeClass(showClass); 
show.eq(index).show('slow'); 
show.not(show.eq(index)).hide(); 
if (index >= btnObj.length -1) { 
index = 0; 
} else { 
index++; 
} 
return index; //返回操作后的index 
}, 
}; 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
autoPlay.setTimeShow($('#list1 li'), $('#btn1 a'), 'over', 3000); 
autoPlay.setTimeShow($('#list2 li'), $('#btn2 a'), 'over', 3000); 
autoPlay.setTimeShow($('#list3 li'), $('#btn3 a'), 'over', 3000); 
}); 
</script> 
</head> 
<body> 
<div class="box"> 
<div class="flash"> 
<ul class="list" id='list1'> 
<li class="over"><img src="images/11.jpg" /></li> 
<li><img src="images/2.jpg" /></li> 
<li><img src="images/6.jpg" /></li> 
<li><img src="images/8.jpg" /></li> 
<li><img src="images/9.jpg" /></li> 
</ul> 
<div class="btn" id="btn1"> 
<a class="over" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a> 
</div> 
</div> 
</div> 
<div class="box"> 
<div class="flash"> 
<ul class="list" id='list2'> 
<li class="over"><img src="images/11.jpg" /></li> 
<li><img src="images/2.jpg" /></li> 
<li><img src="images/6.jpg" /></li> 
<li><img src="images/8.jpg" /></li> 
<li><img src="images/9.jpg" /></li> 
</ul> 
<div class="btn2" id="btn2"> 
<a class="over" href="#"><img src="images/11.jpg"/></a><a href="#"><img src="images/2.jpg"/></a><a href="#"><img src="images/6.jpg"/></a><a href="#"><img src="images/8.jpg"/></a><a href="#"><img src="images/9.jpg"/></a> 
</div> 
</div> 
</div> 
<div class="box"> 
<div class="flash2"> 
<ul class="list" id='list3'> 
<li class="over"><img src="images/11.jpg" /></li> 
<li><img src="images/2.jpg" /></li> 
<li><img src="images/6.jpg" /></li> 
<li><img src="images/8.jpg" /></li> 
<li><img src="images/9.jpg" /></li> 
</ul> 
<div class="btn2" id="btn3"> 
<a class="over" href="#"><img src="images/11.jpg"/></a><a href="#"><img src="images/2.jpg"/></a><a href="#"><img src="images/6.jpg"/></a><a href="#"><img src="images/8.jpg"/></a><a href="#"><img src="images/9.jpg"/></a> 
</div> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
vue实现公共方法抽离
Jul 31 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 #Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 #Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 #Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 #Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 #Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 #Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 #Javascript
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php创建多级目录的方法
2015/03/24 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python异常处理知识点总结
2019/02/18 Python
python多线程并发及测试框架案例
2019/10/15 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
硕士研究生求职自荐信范文
2014/03/11 职场文书
先进学校事迹材料
2014/12/30 职场文书
班主任工作实习计划
2015/01/16 职场文书
现役军人家属慰问信
2015/03/24 职场文书
公积金贷款承诺书
2015/04/30 职场文书
六五普法心得体会2016
2016/01/21 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python