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

更新时间：2011年09月28日 23:46:38 作者：

图片轮换的效果随处可见，但是我还是试着封装了一个函数。一个页面上可以多次调用。。。由于初学代码写的不是多好，其中有个文件是可以踢出到一个js文件里的，这是为了测试方便，我都给放在了一个页面里了。

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

 
<!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> 

您可能感兴趣的文章:

图片轮换

uniapp时间格式化处理实现
本文主要介绍了uniapp时间格式化处理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
javascript手机验证、邮箱验证、密码验证的正则表达式简单封装实例
正则表达式在日常的数据验证中是必不可少的验证方式,这篇文章主要给大家介绍了关于javascript手机验证、邮箱验证、密码验证的正则表达式简单封装的相关资料,需要的朋友可以参考下
2022-09-09
使用JS实现一个功能丰富的待办事项应用
在日常工作和生活中,我们经常需要处理各种各样的待办事项,这篇文章主要为大家详细介绍了如何使用JavaScript实现一个功能丰富的待办事项应用,需要的可以了解下
2024-01-01
js正则表达式匹配数字字母下划线等
本文给大家分享的是使用正则表达式检测只含有汉字、数字、字母、下划线等示例，非常的简单实用，这里推荐给大家，有需要的小伙伴参考下。
2015-04-04
巧方法 JavaScript获取超链接的绝对URL地址
这篇文章主要为大家详细介绍了一个非常巧妙的方法，JavaScript如何获取超链接的绝对URL地址，感兴趣的小伙伴们可以参考一下
2016-06-06
js模拟微博发布消息
本文主要介绍了js模拟微博发布消息的实例，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
浅谈es6语法 (Proxy和Reflect的对比)
下面小编就为大家带来一篇浅谈es6语法 (Proxy和Reflect的对比)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
javascript 二进制运算技巧解析
javascript 中的二进制运算的一些技巧，晒出来和你们分享一下，希望可以帮助你们
2012-11-11
ES6新语法之解构实践指南
所谓解构就是解构聚合数据,下面这篇文章主要给大家介绍了关于ES6新语法之解构的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
解决js下referer兼容各大浏览器的方法
众所周知，我们web开发人员痛恨IE浏览器，因为IE不支持标准，标准外的默认行为又和其他浏览器经常不一致，所以我们在做项目的时候，经常需要专门针对IE来做些文章，当然对于referer也不例外，今天我们就来看下如何让referer兼容主流浏览器
2014-11-11