封装了一个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 相关文章推荐
从零学jquery之如何使用回调函数
May 16 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
了解JavaScript中let语句
May 30 Javascript
js回调函数仿360开机
Dec 26 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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编写大型网站问题集
2007/03/06 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php全排列递归算法代码
2012/10/09 PHP
浅析php创建者模式
2014/11/25 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php基本函数汇总
2015/07/09 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
node.js超时timeout详解
2014/11/26 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python生成词云的实现代码
2020/01/14 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
2014年文学毕业生自我鉴定
2014/04/23 职场文书
感恩教育月活动总结
2014/07/07 职场文书
年终晚会活动方案
2014/08/21 职场文书
2014年管理工作总结
2014/11/22 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript