您的位置：首页 > Web前端 > JavaScript

javascript焦点图之缓冲滚动无缝切换

2016-11-16 11:29 99 查看

在用于实现无缝切换四张图，所以设置了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>

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航