使用jQuery制作轮播图
建一个HTML文件,并引入js文件
1) 将要使用的图片进行引入,也就是写出样式来
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<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>李大玄</title>
<script src="../jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<a href="javascript: ;"><img src="images/1.jpg" alt=""></a>
</li>
<li>
<a href="javascript: ;"><img src="images/2.jpg" alt=""></a>
</li>
<li>
<a href="javascript: ;"><img src="images/3.jpg" alt=""></a>
</li>
<li>
<a href="javascript: ;"><img src="images/4.jpg" alt=""></a>
</li>
<li>
<a href="javascript: ;"><img src="images/5.jpg" alt=""></a>
</li>
<li>
<a href="javascript: ;"><img src="images/6.jpg" alt=""></a>
</li>
<li>
<a href="javascript: ;"><img src="images/7.jpg" alt=""></a>
</li>
<li>
<a href="javascript: ;"><img src="images/8.jpg" alt=""></a>
</li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span> // 左箭头点击事件
<span class="arrow-right">></span> // 右箭头点击事件
</div>
</div>
</body>
</html>好,基本样式写出来了,这时候你可以打开看一看是什么样式的,有木有感觉很乱,接下来设置设置样式.
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<style> // 将所有的
* {
margin: 0;
padding: 0;
list-style: none;
}
// 最大的盒子
.container {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
}
// 这里使用定位将元素脱标,使他们落到一块
.container li {
position: absolute;
display: none;
}
.container li:first-child {
display: block;
}
.arrow {
display: none;
}
.container:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>根据我要写的js 我写的是这样的演示,根据分析你所要的样式,进行编写..
样式写完就可以了,这样最根本的就写好了,接下来写 js
入口函数,如果写在结构上面的话就得写入口函数,要是写在下面的话,就不用写了.
- 设置一个变量 index 用来设置图片的数量
- 获取,当前文件下的所有 li 标签,jQuery具有一个好处,就是隐身迭代,也就是偷偷的遍历.
- 给右按钮设置点击事件,每点击一次的时候,让 index 自增,因为图片的数量是有限的,如果index自增的数量超过图片的数量,就会显示空,所以这里进行判断,当 index 大于最后一张图片的索引,就使 index 变为0. 获取li 标签 使用 一个 jQuery的一个方法，eq() 根据索引找元素，就是当前的index，然后使当前的这个图片渐入，使其他的图片渐出，这样就OK了。
当然了，左按钮的原理与右按钮的原理是一样的，只不过是判断条件不一样，
- 左按钮的点击事件，因为是第一张变为左后一张，所以点击一次，就得让 index 减减，因为一上来就是0，所以，如果当 index 小于0的时候，重新赋值，赋值为最后一张图片的索引位置，渐入渐出同理。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19$(function() {
var index = 0;
var $lis = $('li');
var len = $lis.length;
$('.arrow-right').click(function() {
index++;
if (index > len - 1) {
index = 0;
};
$('.container li').eq(index).fadeIn(1000).siblings().fadeOut();
});
$('.arrow-left').click(function() {
index--;
if (index < 0) {
index = len - 1;
};
$('.container li').eq(index).fadeIn(1000).siblings().fadeOut();
});
});