封装了一个js图片轮换效果的函数
封装了一个js图片轮换效果的函数
发布时间:2016-12-30 来源:查字典编辑
摘要:其中如果有问题,有更好的意见或者建议都可在最后留言,都将对您感激不尽。具体的代码如下:复制代码代码如下:图片轮换效果body,div{mar...

其中如果有问题,有更好的意见或者建议都可在最后留言,都将对您感激不尽。

具体的代码如下:

复制代码 代码如下:

<!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>

<div>

<ul id='list1'>

<li><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 id="btn1">

<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a>

</div>

</div>

</div>

<div>

<div>

<ul id='list2'>

<li><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 id="btn2">

<a 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>

<div>

<ul id='list3'>

<li><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 id="btn3">

<a 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教程学习
热门Javascript教程学习
编程开发子分类