封装了一个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实现标签页效果(配合css)
Apr 03 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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脚本的10个技巧(3)
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python将list转为matrix的方法
2018/12/12 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
python日志logging模块使用方法分析
2019/05/23 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
python模拟实现斗地主发牌
2020/01/07 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
学校介绍信范文
2014/01/14 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
惊天动地观后感
2015/06/10 职场文书
自荐信范文
2019/05/20 职场文书