封装了一个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判断页面是否加载完成实现代码
Dec 11 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 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/02/25 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
表单提交验证类
2006/07/14 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python实现简单温度转换的方法
2015/03/13 Python
Python全局变量操作详解
2015/04/14 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python获取代理IP的实例分享
2018/05/07 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
销售演讲稿范文
2014/01/08 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
教师求职自荐信
2015/03/26 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Python面向对象编程之类的概念
2021/11/01 Python