封装了一个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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
浅谈js闭包理解
Mar 28 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
基于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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
javascript 对象的定义方法
2007/01/10 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
python 文件与目录操作
2008/12/24 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
JPA面试常见问题
2016/11/14 面试题
一套Java笔试题
2016/08/20 面试题
会计助理的岗位职责
2013/11/29 职场文书
教师党员一句话承诺
2014/03/28 职场文书
安全责任书怎么写
2014/07/28 职场文书
学生评语集锦
2015/01/04 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android