封装了一个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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
基于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 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
set在python里的含义和用法
2019/06/24 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
房屋转让协议书
2014/10/18 职场文书
整改落实自查报告
2014/11/05 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
离婚协议书范文
2015/01/26 职场文书
2016情人节宣传语
2015/07/14 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
Python基础之数据结构详解
2021/04/28 Python
python opencv通过4坐标剪裁图片
2021/06/05 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
TV动画《间谍过家家》公开PV
2022/03/20 日漫
实现GO语言对数组切片去重
2022/04/20 Golang
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技