• 图片轮播好像经常要用到,让图片轮播的方法:将多个大小相同的图片横排放在一个图片中,然后在图片容器外加一个展示容器,并为图片容器添加自定义动画,在动画不同阶段设置递增的偏移值即可实现图片轮播。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrap" id='wrap'>
<!-- 要轮播的图片 -->
<ul id="pic">
<li><img src="image/banner1.jpg" alt=""></li>
<li><img src="image/banner2.jpg" alt=""></li>
<li><img src="image/banner3.jpg" alt=""></li>
<li><img src="image/banner4.jpg" alt=""></li>
</ul>
<!-- 左右切换按钮 -->
<ul>
<li class="left" id="left"><img src="image/.png" /></li>
<li class="right" id="right"><img src="image/foot.png" /></li>
</ul>
<!-- 分页器 -->
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
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
* {
margin: 0;
padding: 0;
list-style: none;
}

.wrap {
height: 480px;
width: auto;
overflow: hidden;
position: relative;
}

.wrap ul {
position: absolute;
}

.wrap ul li {
height: 480px;
width: auto;
}

.wrap ol {
position: absolute;
left: 40%;
bottom: 10px;
}

.wrap ol li {
height: 30px;
width: 30px;
border-radius: 50%;
background: #ccc;
border: solid 7px darkgray;
margin-left: 5px;
color: #000;
float: left;
line-height: 30px;
text-align: center;
cursor: pointer;
}

.wrap ol .on {
background: red;
color: #fff;
}

.left {
position: absolute;
left: 50px;
top: 50%;
clip: rect(-24px 57px 108px -13px);
}

.right {
position: absolute;
top: 50%;
right: 50px;
clip: rect(-19px 112px 108px 41px);
}

img {
width: 100%;
}
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
window.onload = function () {
// 获取DOM元素节点
left = document.getElementById("left");
right = document.getElementById("right");
div = document.getElementById("wrap");
pic = document.getElementById("pic").getElementsByTagName("li");
item = document.getElementById("list").getElementsByTagName("li");
var index = 0;
function change() {
for (var i = 0; i < pic.length; i++) {
pic[i].style.display = "none";
item[i].className = "";
}

if (index > 3) {
index = 0;
}

pic[index].style.display = "block";
item[index].className = "on";
index++;
}

var set = setInterval(change, 1500);
for (var k = 0; k < item.length; k++) {
item[k].index = k;
item[k].onclick = function () {

for (var j = 0; j < pic.length; j++) {
pic[j].style.display = "none";
item[j].className = "";
}

index = this.index;
pic[index].style.display = "block";
item[index].className = "on";
}
}

// 鼠标移动到图片上时(轮播停止,切换按钮显示)
div.onmouseover = function () {
clearInterval(set);
right.style.display = "block";
left.style.display = "block";
}

// 鼠标从图片上移开(轮播重新开始,切换按钮隐藏)
div.onmouseout = function () {
set = setInterval(change, 1500);
right.style.display = "none";
left.style.display = "none";
}

// 切换到上一张
left.onclick = function () {
for (var i = 0; i < pic.length; i++) {
pic[i].style.display = "none";
item[i].className = "";
}

if (index < 0) {
index = 3;
}

pic[index].style.display = "block";
item[index].className = "on";
index--;
}
}

// 切换到下一张
right.onclick = function () {
for (var i = 0; i < pic.length; i++) {
pic[i].style.display = "none";
item[i].className = "";
}

if (index > 3) {
index = 0;
}

pic[index].style.display = "block";
item[index].className = "on";
index++;
}