封装了一个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实现浏览器菜单命令
Sep 05 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
jquery实现图片轮播器
May 23 jQuery
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
php获取网页内容方法总结
2008/12/04 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python实现多线程网页下载器
2018/04/15 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python使用re模块验证危险字符
2020/05/21 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
一个C/C++编程面试题
2013/11/10 面试题
实习期自我鉴定
2013/10/11 职场文书
一名老师的自我评价
2014/02/07 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL