封装了一个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向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
理解javascript async的用法
Aug 22 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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中养成7个面向对象的好习惯
2010/07/17 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python对视频画框标记后保存的方法
2018/12/07 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Python 操作 MySQL数据库
2020/09/18 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
教育科学研究生自荐信
2013/10/09 职场文书
考博自荐信
2013/10/25 职场文书
旅游市场营销方案
2014/03/09 职场文书
幼儿园运动会口号
2014/06/07 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
公司合作协议范文
2014/10/01 职场文书
行风评议整改报告
2014/11/06 职场文书
导游欢送词
2015/01/31 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
php png失真的原因及解决办法
2021/11/17 PHP