引言
学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了。现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现。
实现原理
1、除第一张图片外,其余图片全部隐藏,4张图片重叠起来。
2、导航按钮添加mouseover和mouseleave事件。
3、设置interval函数,启动定时器调用ShowImg函数。
4、动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属性,在以前滑动门中也是这个原理。
效果图(图片引用自橡树小屋博客)
实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<html>
<head>
<meta
http-equiv= "Content-Type" content= "text/html;
charset=UTF-8" >
<title>Index</title>
<script
type= "text/javascript" src= "js/jquery-1.4.1.js" ></script>
<style
type= "text/css" >
*{margin:
0;padding: 0;}
ul
li{list-style: none;}
#scrollpics{width:
478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;}
.num{position:absolute;right:
8px;bottom: 8px;}
.num
li { float :left;color:#FF7300;text-align:
center;width: 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;}
.num
li. on {color:#fff;background-color:
#FF7300;}
</style>
<script
type= "text/javascript" >
var index=0;
var adTimer;
$(function(){
var len
= $( "ul.num
li" ).length;
$( ".num
li" ).mouseover(function(){
index=$( ".num
li" ).index( this );
ShowImg(index);
});
$( "#scrollpics" ).hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
ShowImg(index);
index++;
if (index==len){
index=0;
}
},3000)
}).trigger( 'mouseleave' );
});
function
ShowImg(index){
var adHeight=$( "#scrollpics>ul>li:first" ).height();
$( ".slider" ).stop( true , false ).animate({
"marginTop" :-adHeight*index+ "px"
},1000);
$( ".num
li" ).removeClass( "on" ).eq(index).addClass( "on" );
}
</script>
</head>
<body>
<div
id= "scrollpics" >
<ul class = "slider" >
<li><img
src= "img/p1.jpg" ></li>
<li><img
src= "img/p3.jpg" ></li>
<li><img
src= "img/p4.jpg" ></li>
<li><img
src= "img/p5.jpg" ></li>
</ul>
<ul class = "num" >
<li class = "on" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
|
引言
学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了。现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现。
实现原理
1、除第一张图片外,其余图片全部隐藏,4张图片重叠起来。
2、导航按钮添加mouseover和mouseleave事件。
3、设置interval函数,启动定时器调用ShowImg函数。
4、动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属性,在以前滑动门中也是这个原理。
效果图(图片引用自橡树小屋博客)
实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul li{list-style: none;}
#scrollpics{width: 478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;}
.num{position:absolute;right: 8px;bottom: 8px;}
.num li {float:left;color:#FF7300;text-align: center;width: 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;}
.num li.on {color:#fff;background-color: #FF7300;}
</style>
<script type="text/javascript">
var index=0;
var adTimer;
$(function(){
var len = $("ul.num li").length;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
ShowImg(index);
});
$("#scrollpics").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
ShowImg(index);
index++;
if(index==len){
index=0;
}
},3000)
}).trigger('mouseleave');
});
function ShowImg(index){
var adHeight=$("#scrollpics>ul>li:first").height();
$(".slider").stop(true,false).animate({
"marginTop":-adHeight*index+"px"
},1000);
$(".num li").removeClass("on").eq(index).addClass("on");
}
</script>
</head>
<body>
<div id="scrollpics">
<ul class="slider">
<li><img src="img/p1.jpg"></li>
<li><img src="img/p3.jpg"></li>
<li><img src="img/p4.jpg"></li>
<li><img src="img/p5.jpg"></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>