封装了一个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实现的网页版的个人简历(可换肤)
Apr 19 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
Flask框架配置与调试操作示例
2018/07/23 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
个人培训总结
2015/03/05 职场文书
MySQL基础(二)
2021/04/05 MySQL
浅谈Web Storage API的使用
2021/06/23 Javascript