JQ管中窥豹——轮播的各种实现

发表于   |   分类于 ，   |  

最近看书学到JQ写轮播，这里总结下常用JQ写轮播的方式。代码已经上传至gitHub

淡入淡出的写法

这个差不多是最简单的，直接是用到fadeIn和fadeOut。具体例子如下：

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Z-one简单淡入淡出轮播</title>
	<style>
	body,ul,li,h1{
		margin:0;
		padding:0;
	}
	a{
		text-decoration: none;
		color:black;
	}
	li{
		list-style: none;
	}
	#wrap{
		width:300px;
		height:250px;
		position: relative;
		margin:0 auto;
	}
	.ct{
		position: absolute;
	}
	.ct li{
		position: absolute;
		left:0;
		right:0;
		display: none;
	}
	.ct img{
		width:300px;
		height:250px;
	}
	.arrow{
		width:30px;
		height:30px;
		position: absolute;
		top:50%;
		margin-top:-15px;
		border-radius: 30px;
		line-height: 30px;
		text-align: center;
		background:#aaa;
		opacity: 0.8;
		display: none;
		font-weight: bolder;
	}
	.arrow:hover{
		opacity: 1;
		background:white;
	}
	#wrap:hover >.arrow{
		display: block;
	}
	.prev{
		left:10px;
	}
	.next{
		right:10px;
	}
	.btn{
		position: absolute;
		bottom:10px;
		left:50%;
		transform:translateX(-50%);
	}
	.btn li{
		float:left;
		padding:8px;
		margin-right:10px;
		border-radius: 8px;
		background:#aaa;
		cursor:pointer;
	}
	.btn li.active{
		background:white;
	}
	#head{
		text-align:center;
	}
	#head h1{
		margin-bottom:40px;
		margin-top:10px;
	}

	</style>
</head>
<body>
	<div id="head">
		<h1>简单淡入淡出轮播</h1>
	</div>
	<div id="wrap">
		<ul class="ct">
			<li><a href="javascript:void(0)"><img src="http://img1.cache.netease.com/catchpic/3/35/35ABB48BBD56C5EF7C3145B5F454CC43.jpg" alt="图片1"></a></li>
			<li><a href="javascript:void(0)"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/8cb1cb1349540923820e17559358d109b3de49b1.jpg" alt="图片2"></a></li>
			<li><a href="javascript:void(0)"><img src="http://i-7.vcimg.com/trim/9e31eba64ca3460d72688e7c96ecd741328963/trim.jpg" alt="图片3"></a></li>
			<li><a href="javascript:void(0)"><img src="http://p17.qhimg.com/bdm/1600_900_85/d/_open360/game1012/8.jpg" alt="图片4"></a></li>
		</ul>
		<a  class="arrow prev"href="#"><</a>
		<a  class="arrow next"href="#">></a>
		<ul class="btn">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
		var $ct=$(".ct");
		var $prev=$(".prev");
		var $next=$(".next");
		var $btn=$(".btn");
		var num=0;//设置初始值
		var key=false;//设定一个状态锁
		var imgnum=$ct.children().size();//获取图片的个数
		play(0)
		autoplay();
    //设置上一个点击事件
	$prev.on("click",function(){
		playPrev();
	})
	//设置下一个点击事件
	$next.on("click",function(){
		playNext();
	})
	//设置下面4个小按钮的点击事件(这里使用事件代理)
	$btn.on("click","li",function(){
		var tem=$(this).index();
		play(tem);
	})
	function playNext(){
		play((num+1)%imgnum);
	}
	function playPrev(){
		play((imgnum+num-1)%imgnum);//确保值在一定的范围
	}
	
	function play(tem){
		if(key===true){
			return;
		}
		key=true;
		//这里用淡入淡出设置
		$ct.children().eq(num).fadeOut(1000);
		$ct.children().eq(tem).fadeIn(1000, function() {	
			key=false;
		});
		num=tem;
		setButton();
	}
	//底部小圆点Button的变化
	function setButton(){
		$btn.children().removeClass('active');
		$btn.children().eq(num).addClass('active');
	}
	//设置定时装置
	function autoplay(){
		auto=setInterval(function(){
			playNext();
		},1000)
	}
	//取消定时
	function autostop(){
		clearInterval(auto);
	}
</script>
</html>

效果图

总结：

这个是个很简单的淡入淡出效果的一个实现，CSS和HTML布局这里就不说了。很简单，不过有几点需要注意的

  • 这里我设置li为绝对定位，那么他的父级#wrap就需要设置为相对定位,然后设置li 里面图片的宽高，li设置为display:none

  • Button那几个小圆点，我设置的flaot，他的父级.btn设置绝对定位。这里并没有设置.btn的宽高，让内容自动撑开。定位的时候用到transfrom:translateX(-50%)`也可以达到水平居中的效果。另外.btn设置了绝对定位，内部形成了一个BFC,这样也能达到清除浮动的效果。

  • JS部分感觉整体思路就是——确定图片个数,——设置好点击事件——三个点击事件弄到play(）函数中——确定好要跳转图片的索引值——先判断状态锁，然后当前图片设置fadeOut(),然后跳转图片设置fadeIn()——然后设置按钮Button()方法，将当前索引值赋值为num——button()方法里面，所有的子元素都removeClass(“active”),然后和当前索引值对于的子元素addClass(“active”),——然后设置定时方法。

无缝轮播

上面这个只是一个很简单的入门轮播- -，下面写一个无缝轮播(这里有两种方法：一种是操作DOM顺序，一种是不用操作DOM顺序的，两种方法我都写出来)

操作DOM方式

原理：
示意图
差不多就是类似这样的一个意思。当我们在向前向后移动的时候，直接先操作DOM，如果是想转换到前N个图片，就先把当前图片后面的N个图片一次添加到这个ul的开头位置。然后再利用left把图片移动到当前位置。(让我们感觉仿佛什么都没有发生一样)，然后在就是向前移动N个图片的位置。
好了具体还是看例子吧：

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝轮播</title>
	<style>
	body,ul,li{
		padding:0;
		margin:0;
	}
	a{
		text-decoration: none;
		color:black;
	}
	li{
		list-style: none;
	}
	#head{
		margin-bottom: 50px;
		text-align: center;
	}
	#wrap{
		width:400px;
		height:300px;
		position: relative;
		margin:0 auto;
		border:10px solid black;
		border-radius: 20px;
	}
	.ct{
		position: relative;
		width:400px;
		height:300px;
		overflow: hidden;
	}
	.ct-img{
		position:absolute;
	}
	.ct-img li{
		float:left;
	}
	.ct-img img{
		width:400px;
		height:300px;
	}
	.arrow{
		width:30px;
		height:30px;
		position: absolute;
		top:50%;
		margin-top:-15px;
		border-radius: 30px;
		text-align:center;
		line-height: 30px;
		background:#aaa;
		opacity: 0.8;
		display: none;
	}
	.arrow:hover{
		background:white;
		opacity: 1;
	}
	#wrap:hover >.arrow{
		display: block;
	}
	.prev{
		left:10px;
	}
	.next{
		right:10px;
	}
	.btn{
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		bottom:20px;
	}
	.btn>li{
		width:20px;
		height:10px;
		border-radius:10px;
		float:left;
		margin-right: 10px;
		background:#aaa;
		cursor: pointer;
	}
	.btn li.active{
		background:white;
	}
	</style>
</head>
<body>
	<div id="head">
		<h1>无缝轮播(操作DOM顺序)</h1>
	</div>
	<div id="wrap">
		<div class="ct">
		<ul class="ct-img">
			<li><a href="javascript:void(0)"><img src="http://img1.cache.netease.com/catchpic/3/35/35ABB48BBD56C5EF7C3145B5F454CC43.jpg" alt="图片1"></a></li>
			<li><a href="javascript:void(0)"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/8cb1cb1349540923820e17559358d109b3de49b1.jpg" alt="图片2"></a></li>
			<li><a href="javascript:void(0)"><img src="http://i-7.vcimg.com/trim/9e31eba64ca3460d72688e7c96ecd741328963/trim.jpg" alt="图片3"></a></li>
			<li><a href="javascript:void(0)"><img src="http://p17.qhimg.com/bdm/1600_900_85/d/_open360/game1012/8.jpg" alt="图片4"></a></li>
		</ul>
		</div>
		<a class="arrow prev"href="javascript:void(0)"><</a>
		<a class="arrow next"href="javascript:void(0)">></a>
		<ul class="btn">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

<script>
	var $ct=$(".ct-img");
	var $prev=$(".prev");
	var $next=$(".next");
	var $btn=$(".btn");
	var num=0//初始值设置为0;
	var key=false//设置状态锁
	var imgWidth=$(".ct-img").find("img").width();//图片宽度
	var imgNum=$(".ct-img").children().size();//图片个数
	
	autopaly();

	$("#wrap").on("mouseenter",function(){
		autostop()
	});
	$("#wrap").on("mouseout",function(){
		autopaly()
	});

	$ct.css("width",imgWidth*imgNum);

	$prev.on("click",function(){
		playPrev();
	})
	$next.on("click",function(){
		playNext();
	})
	$btn.on("click","li",function(){
		var tem=$(this).index();
		if(tem>num){
			playNext(tem-num);
		}if(tem<num){
			playPrev(num-tem);
		}else if(tem===num){
			return;
		}
	})

	function playNext(tem){
		var idx=tem||1;
		if(key===true){
			return;
		}
		key=true;
		$ct.animate({
			"left":"-="+imgWidth*idx
		},function(){
			num=(num+idx)%imgNum
			for(var i=0;i<idx;i++){
				$ct.append($ct.children().first())
			}
			$ct.css("left",0)
			key=false;
			setButton();
		})
	}

	function playPrev(tem){
		var idx=tem ||1;
		if(key ===true){
			return;
		}
		key=true;
		for(var i=0;i<idx;i++){
			$ct.prepend($ct.children().last())
		}
		$ct.css("left",0-imgWidth*idx)
		$ct.animate({
			"left":"+="+imgWidth*idx
		},function(){
			num=(imgNum+num-idx)%imgNum;
			key=false;
			setButton();
		})
	}
	function setButton(){
		$btn.children().removeClass('active');
		$btn.children().eq(num).addClass('active');
	}
	function autopaly(){
		auto=setInterval(function(){
			playNext();
		},2000)
	}
	function autostop(){
		clearInterval(auto)
	}
</script>
</html>

总结：

我感觉用这种操作DOM的方法的时候只要思路理清楚，之后还是很简单的。
总体思路就是：

  • 假定只有4个图片,我们操作向前一页，向后一页就相当于用left把ul向前向后移动。ul向后移动，我们感觉就是上一页图片，ul向前移动，我们感觉就是下一页图片
  • 当向后移动的时候，先移动，然后再确定移动后的位置，把这个位置前面的所有图片，都移动到最后面。这时候图片的位置发生了变化。就需要用left操作，让我们感觉没有发生变化。因为这时，移动后的图片前面的图片都到后面去了。他就是第一位，所有只要用$ct.css("left",0)这样我们看到的就是第一副图片了。
  • 当向前移动的时候，这时候先操作DOM。把当前图片后面的图片移动到最前面(要移动几幅图，就搬运几幅图),这时候图片位置就发生了变化，图片就相对于原来往右便宜了N个图片的距离，这时候用$ct.css("left",0-imgWidth*N)让整体往左边移动N个图片的距离，让我们感觉仿佛什么都没有发生一样，然后在用$ct.animate()操作。
  • 当向前移动后，确定num值的时候要注意用num=(imgNum+num-n)%imgNum这样可以避免num值出现负数的尴尬情况。

示意图

不操作DOM的方法

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝轮播</title>
	<style>
	body,ul,li{
		padding:0;
		margin:0;
	}
	a{
		text-decoration: none;
		color:black;
	}
	li{
		list-style: none;
	}
	#head{
		margin-bottom: 50px;
		text-align: center;
	}
	#wrap{
		width:400px;
		height:300px;
		position: relative;
		margin:0 auto;
		border:10px solid black;
		border-radius: 20px;
	}
	.ct{
		position: relative;
		width:400px;
		height:300px;
		overflow: hidden;
	}
	.ct-img{
		position:absolute;
	}
	.ct-img li{
		float:left;
	}
	.ct-img img{
		width:400px;
		height:300px;
	}
	.arrow{
		width:30px;
		height:30px;
		position: absolute;
		top:50%;
		margin-top:-15px;
		border-radius: 30px;
		text-align:center;
		line-height: 30px;
		background:#aaa;
		opacity: 0.8;
		display: none;
	}
	.arrow:hover{
		background:white;
		opacity: 1;
	}
	#wrap:hover >.arrow{
		display: block;
	}
	.prev{
		left:10px;
	}
	.next{
		right:10px;
	}
	.btn{
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		bottom:20px;
	}
	.btn>li{
		width:20px;
		height:10px;
		border-radius:10px;
		float:left;
		margin-right: 10px;
		background:#aaa;
	}
	.btn li.active{
		background:white;
	}
	</style>
</head>
<body>
	<div id="head">
		<h1>无缝轮播(操作DOM顺序)</h1>
	</div>
	<div id="wrap">
		<div class="ct">
		<ul class="ct-img">
			<li><a href="javascript:void(0)"><img src="http://img1.cache.netease.com/catchpic/3/35/35ABB48BBD56C5EF7C3145B5F454CC43.jpg" alt="图片1"></a></li>
			<li><a href="javascript:void(0)"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/8cb1cb1349540923820e17559358d109b3de49b1.jpg" alt="图片2"></a></li>
			<li><a href="javascript:void(0)"><img src="http://i-7.vcimg.com/trim/9e31eba64ca3460d72688e7c96ecd741328963/trim.jpg" alt="图片3"></a></li>
			<li><a href="javascript:void(0)"><img src="http://p17.qhimg.com/bdm/1600_900_85/d/_open360/game1012/8.jpg" alt="图片4"></a></li>
		</ul>
		</div>
		<a class="arrow prev"href="javascript:void(0)"><</a>
		<a class="arrow next"href="javascript:void(0)">></a>
		<ul class="btn">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

<script>
	var $ct=$(".ct-img");
	var $prev=$(".prev");
	var $next=$(".next");
	var $btn=$(".btn");
	var num=0//初始值设置为0;
	var key=false//设置状态锁
	var imgWidth=$(".ct-img").find("img").width();//图片宽度
	var imgNum=$(".ct-img").children().size();//图片个数

	$ct.prepend($ct.children().last().clone());//把最后一个元素克隆后弄到第一个
	$ct.append($ct.children().eq(1).clone())//把第二个元素克隆后弄到最后一个。
	var newNum=$ct.children().size();//克隆后图片的数量。
	$ct.css({
		"width":imgWidth*newNum,
		"left":0-imgWidth//整体向左移动一个图片的距离，让我们看到的还是之前的那副图片
	})
	autoplay();
	$(".ct").on("mouseenter",function(){
		autostop();
	})
	$(".ct").on("mouseout",function(){
		autoplay();
	})
	$prev.on("click",function(){
		playPrev();
	})
	$next.on("click",function(){
		playNext();
	})
	$btn.on("click","li",function(){
		var tem=$(this).index();
		if(tem>num){
			playNext(tem-num);
		}if(tem<num){
			playPrev(num-tem);
		}if(tem=num){
			return;
		}
	})
	function playNext(tem){
		var idx=tem||1;
		if(key===true){
			return;
		}
		key=true;
		$ct.animate({
			"left":"-="+imgWidth*idx
		},function(){
			num=(num+idx)%imgNum;
			if(num===0){
				$ct.css("left",0-imgWidth)
			}
			key=false;
			setButton();
		})
	}
	function playPrev(tem){
		var idx=tem||1;
		if(key===true){
			return;
		}
		key=true;
		$ct.animate({"left":"+="+imgWidth*idx},function(){
			num=(imgNum+num-idx)%imgNum;
			if(num===(imgNum-1)){
				$ct.css("left",0-imgWidth*imgNum)
			}
			key=false;
			setButton();
		})
	}
	function setButton(){
		$btn.children().removeClass('active');
		$btn.children().eq(num).addClass('active');
	}
	function autostop(){
		clearInterval(auto);
	}
	function autoplay(){
		auto=setInterval(function(){
			playNext();
		},3000)
	}
	
	</script>
总结：总体思路

  • 这种不擦做DOM的方式，就相当于在左右两边分别克隆了一个，好比这样
    示意图

  • 克隆后把ul的宽度设为

    1
    2
    3
    4
    5
    var newNum=$ct.children().size();
    $ct.left({
    "width":imgWidth*newNum,
    "left":0-imngWidth
    })

  • 移动原理和上一个类似，只是这里有点区别。当移动到最开始那个位置的时候，这时num=(num+imgNum-idx)%imgNum;num等于imgNum-1的时候，就需要让这个ul,移动到原来imgNum-1对应的地方，相当于把ul整体向左移动imgNum个位置用$ct.css("left",0-imgNum*imgWidth)实现.

  • 当移动到克隆那个0的时候，用同样的方法吧ul移动到原来0对应的位置。$ct.css("left",imgWidth)

首页全屏轮播

原理和上面的类似，有点不同的就是：

1
2
3
4
html,body,#wrap,#wrap .ct,#wrap .ct-img,#wrap .ct-img div{
			width:100%;
			height:100%;
		}

然后我用的是background因为bakcground有个属性background-size:cover做全屏的大图很方便

效果图

总结

JQ的轮播花了一天时间弄懂原理，然后花了一天时间去实现代码。在实现的时候还是感觉要多写，懂的原理和实现出来完全不是一个概念- -。。。。。
作为一个待业青年的人。。这段时间好好归纳整体下jQ的用法。