1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>carousel</title>
6 <style type="text/css">
7 *{margin: 0;padding: 0;text-decoration: none;}
8 body{padding: 20px;}
9 #container{width: 384px;height: 216px;border: 3px solid #333;overflow: hidden;position: relative;}
10 #list{width: 2688px;height: 216px;position: absolute;z-index: 1;}
11 #list img{float: left;}
12 #list img{width: 384px;height: 216px;}
13 #buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 140px;}
14 #buttons span{cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;}
15 #buttons .on{background: orangered}
16 .arrow{cursor: pointer;display:none;line-height: 39px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position:absolute;z-index: 2;top: 90px;background-color: rgba(0, 0, 0, 0.3);color: #fff}
17 .arrow:hover{background-color: rgba(0, 0, 0, 0.7);}
18 #container:hover .arrow{display: block;}
19 #prev{left: 20px;}
20 #next{right: 20px;}
21 </style>
22 <script type="text/javascript">
23 window.onload=function(){
24 var container=document.getElementById(‘container‘);
25 var list=document.getElementById("list");
26 var buttons=document.getElementById(‘buttons‘).getElementsByTagName("span");
27 var prev=document.getElementById("prev");
28 var next=document.getElementById(‘next‘);
29 var animated=false;
30 var timer;
31 //小圆点
32 var index=1;
33 function showButton() {
34 //亮起当前图片对应的小圆点的同时关闭其他亮起的小圆点
35 for (var i = 0; i < buttons.length; i++) {
36 if (buttons[i].className == ‘on‘) {
37 buttons[i].className = ‘‘;
38 break;
39 }
40 }
41 buttons[index - 1].className = ‘on‘;
42 }
43 function animate(offset) {
44 animated=true;
45 var newLeft=parseInt(list.style.left) + offset;
46 //位移总时间
47 var time=200;
48 //位移时间间隔
49 var interval=10;
50 //每次位移量
51 var speed=offset/(time/interval);
52 function go(){
53 if((speed < 0 && parseInt(list.style.left) > newLeft ) || (speed >0 && parseInt(list.style.left) < newLeft)){
54 list.style.left=parseInt(list.style.left) + speed + ‘px‘;
55 setTimeout(go,interval);
56 }else{
57 animated=false;
58 //animate=false;
59 //list.style.left=parseInt(list.style.left) + offset +"px" ;
60 list.style.left=newLeft + "px";
61
62 if (newLeft < -1920) {
63 list.style.left=-384 + "px";
64 }
65 if (newLeft > -384) {
66 list.style.left=-1920 + "px";
67 }
68 }
69 }
70 go();
71 }
72 //自动播放功能
73 function play(){
74 timer=setInterval(function(){
75 next.onclick();
76 },3000);
77 }
78 //清除定时器
79 function stop(){
80 clearInterval(timer);
81 }
82 //点击右箭头,left值减少384,实质是list(div框)左移384px
83 next.onclick=function () {
84 if (index == 5) {
85 index = 1;
86 }else{
87 index += 1;
88 }
89
90 showButton();
91 if(!animated){
92 animate(-384);
93 }
94
95 }
96
97 //点击左箭头
98 prev.onclick=function (){
99 if (index == 1) {
100 index=5;
101 }else{
102 index -= 1;
103 }
104
105 showButton();
106 if(!animated){
107 animate(384);
108 }
109
110 }
111 //给每个小圆点添加点击事件
112 for (var i = 0; i < buttons.length; i++) {
113 buttons[i].onclick=function(){
114 //判断一下当前点击的小圆点对应的图片是否是当前现实的图片，如果是就不进行图片切换
115 if (this.className == ‘on‘) {
116 return;
117 }
118 //获取当前点击小圆点的index值
119 //getAttribute可以获得DOM中的属性的值，也可以获得自定义属性的值
120 var myindex=parseInt(this.getAttribute(‘index‘));
121 //计算偏移量
122 var offset = -384 * (myindex - index);
123 //显示指定的图片
124 if(!animated){
125 animate(offset);
126 }
127
128 //同时亮起对应的小圆点
129 index=myindex;
130 showButton();
131
132 }
133 }
134 //鼠标移入自动播放停止，清除定时器
135 container.onmouseover=stop;
136 container.onmouseout=play;
137 play();
138 }
139 </script>
140 </head>
141 <body>
142 <div id="container">
143 <div id="list" style="left:-384px;">
144 <img src="images/5.jpg" alt="" />
145 <img src="images/1.jpg" alt="" />
146 <img src="images/2.jpg" alt="" />
147 <img src="images/3.jpg" alt="" />
148 <img src="images/4.jpg" alt="" />
149 <img src="images/5.jpg" alt="" />
150 <img src="images/1.jpg" alt="" />
151 </div>
152 <div id="buttons">
153 <span index="1" class="on"></span>
154 <span index="2"></span>
155 <span index="3"></span>
156 <span index="4"></span>
157 <span index="5"></span>
158 </div>
159 <a href="javascript:" class="arrow" id="prev"><</a>
160 <a href="javascript:" class="arrow" id="next">></a>
161 </div>
162 </body>
163 </html>
效果如图所示：
时间： 2024-10-24 22:05:50