在用于实现无缝切换四张图，所以设置了6个图片就是 4，0，1，2，3，4，0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
#ptoDiv {
width: 400px;
height: 200px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
#ptoBox {
width: 2400px;
height: 200px;
position: absolute;
left: -400px;
}
#pto {
list-style-type: none;
}
.base {
width: 400px;
height: 200px;
float: left;
}
.base1 {
background: red;
}
.base2 {
background: blue;
}
.base3 {
background: pink;
}
.base4 {
background: green;
}
#btn1 {
position: absolute;
width: 30px;
height: 30px;
background: yellow;
top: 85px;
left: 0;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
}
#btn2 {
position: absolute;
width: 30px;
height: 30px;
background: yellow;
top: 85px;
right: 0;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
}
#cirBox {
width: 80px;
height: 16px;
position: absolute;
top: 160px;
left: 160px;
}
/*16*4+4*4*/
#cir {
list-style-type: none;
position: relative;
}
#cir li {
float: left;
width: 16px;
height: 16px;
margin: 0 2px;
background: white;
}
#cir .on {
width: 16px;
height: 16px;
background: yellow;
}
</style>
</head>
<body>
<div id="ptoDiv">
<div id="ptoBox">
<ul id="pto">
<li class="base base4">four</li>
<li class="base base1">one</li>
<li class="base base2">two</li>
<li class="base base3">three</li>
<li class="base base4">four</li>
<li class="base base1">one</li>
</ul>
</div>
<span id="btn1"></span>
<span id="btn2"></span>
<div id="cirBox">
<ul id="cir">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
<script src="changfunction.js"></script>这个是已经写好的库，用于改变图片的切换
1 <script src="changfunction.js"></script>
2 <script>
3 function $(id) {
4 return typeof id === "string" ? document.getElementById(id) : id;
5 }
6 window.onload = function() {
7 var btnLeft = $("btn1");
8 var btnRight = $("btn2");
9 var pto = $("pto").getElementsByTagName("li");
10 var ptoBox = $("ptoBox");
11 var cir = $("cir").getElementsByTagName("li");
12 var timer = null;
13 var Div = $("ptoDiv");
14 var index = 1;
15 var length = 400;
16
17 /*for (var i = 0; i < cir.length; i++) {
18 cir[i].id = i;
19 cir[i].onmouseenter = function() {
20 clearOn();
21 showOn(this.id);
22 changeBtn(ptoBox, {
23 left: (-400 * this.id)
24 });
25 }
26 }*/
27
28 //两个btnLeft绑定事件，改变透明度
29 btnLeft.onmouseenter = function() {
30 changeBtn(btnLeft, {
31 opacity: 100
32 });
33 }
34
35 btnLeft.onmouseleave = function() {
36 changeBtn(btnLeft, {
37 opacity: 50
38 });
39 }
40 //两个btnRight绑定事件，改变透明度
41 btnRight.onmouseenter = function() {
42 changeBtn(btnRight, {
43 opacity: 100
44 });
45 }
46
47 btnRight.onmouseleave = function() {
48 changeBtn(btnRight, {
49 opacity: 50
50 });
51 }
52
53 //btnRight鼠标点击绑定事件
54 btnRight.onclick = function() {
55 console.log(index);
56 //全局变量index为当前图片的序号
57 if (index < pto.length - 1) {
58 //index不大于4时，则自增1
59 index++;
60 } else {
61 //大于4，则index从第三张图片开始
62 index = 2;
63 ptoBox.style[‘left‘] = -400 + ‘px‘;
64 }
65 //调用函数(通过缓冲显示图片)
66 changeBtn(ptoBox, {
67 left: (-400 * index)
68 });
69 //清除函数
70 clearOn();
71 //显示图片函数
72 showOn(index);
73 }
74
75 //鼠标左键绑定事件，同理
76 btnLeft.onclick = function() {
77 if (index == 0) {
78 index = pto.length - 3;
79 ptoBox.style[‘left‘] = -1600 + ‘px‘;
80 } else {
81 index--;
82 }
83 changeBtn(ptoBox, {
84 left: (-400 * index)
85 });
86 clearOn();
87 showOn(index);
88
89 }
90
91 //清楚已经显示的小框
92 function clearOn() {
93 for (var i = 0; i < cir.length; i++) {
94 cir[i].className = "";
95 }
96 }
97
98 //显示当前的小框
99 function showOn(x) {
100 //因为框只有四个，所以需要做一个强制转换
101 //当x的值到达0和5的时候，重新给x赋值
102 if (x == 0) {
103 x = 4;
104 }
105 if (x == 5) {
106 x = 1;
107 }
108 for (var i = 0; i < cir.length; i++) {
109 if (i == (x - 1)) {
110 cir[i].className = "on";
111 }
112
113 // index = x;
114 }
115 }
116
117 //自动循环函数
118 function start() {
119 timer = setInterval(function() {
120 btnRight.onclick();
121 }, 3000);
122
123 }
124 //停止函数
125 function stop() {
126 clearInterval(timer);
127 }
128
129 //当鼠标移动至div则停止
130 Div.onmouseenter = stop;
131 //当鼠标移出则开始
132 Div.onmouseleave = start;
133 //进入页面，则开始自动循环
134 start();
135 }
136 </script>
时间： 2024-10-25 16:35:48