1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>js原生web轮播图</title>
6 <style>
7 *{
8 margin:0;
9 padding:0;
10 list-style: none;
11 -moz-user-select: none;/*文字不可选择*/
12 -khtml-user-select: none;/*文字不可选择*/
13 user-select: none;/*文字不可选择*/
14 }
15 #container{
16 width: 600px;
17 height: 400px;
18 position: relative;
19 overflow: hidden;
20 }
21 #slider{
22 margin-left:-600px;
23 width: 4200px;
24 height: 400px;
25 }
26 #slider li{
27 width: 600px;
28 height: 400px;
29 float: left;
30 }
31 img{
32 width: 600px;
33 height: 400px;
34 }
35 #prev{
36 position: absolute;
37 top:40%;
38 left:0px;
39 width: 50px;
40 height: 50px;
41 background-color: #eee;
42 z-index: 999;
43 line-height:50px;
44 text-align: center;
45 }
46 #prev:hover{
47 cursor: pointer;
48 }
49 #next{
50 position: absolute;
51 top:40%;
52 right:0px;
53 width: 50px;
54 height: 50px;
55 background-color: #eee;
56 z-index: 999;
57 line-height:50px;
58 text-align: center;
59 }
60 #next:hover{
61 cursor: pointer;
62 }
63 #dotul{
64 position: absolute;
65 bottom:100px;
66 left:38%;
67 width: 150px;
68 height: 20px;
69 }
70 .dot{
71 background-color: green;
72 }
73 #dotul li{
74 margin-left:10px;
75 width: 20px;
76 height: 20px;
77 float: left;
78 border-radius: 10px;
79 z-index: 999;
80 }
81 li{
82 background-color: red;
83 }
84 </style>
85 </head>
86 <body>
87 <div id="container">
88 <ul id="slider">
89 <li><img src="5.jpg" alt=""></li>
90 <li><img src="1.jpg" alt=""></li>
91 <li><img src="2.jpg" alt=""></li>
92 <li><img src="3.jpg" alt=""></li>
93 <li><img src="4.jpg" alt=""></li>
94 <li><img src="5.jpg" alt=""></li>
95 <li><img src="1.jpg" alt=""></li>
96 </ul>
97 <ul id="buttons">
98 <li id="prev">上一张</li>
99 <li id="next">下一张</li>
100 </ul>
101 <div id="dots">
102 <ul id="dotul">
103 <li index="1" class="dot"></li>
104 <li index="2"></li>
105 <li index="3"></li>
106 <li index="4"></li>
107 <li index="5"></li>
108 </ul>
109 </div>
110 </div>
111
112 <script>
113 var container = document.getElementById('container');
114 var slider = document.getElementById('slider');
115 var prev=document.getElementById('prev');
116 var next=document.getElementById('next');
117 var dots=document.getElementById('dotul').getElementsByTagName('li');
118 var index=1;
119 var timer;
120 function dotsInit(){
121 for (var i = 0; i < dots.length; i++) {
122 console.log(dots[i]);
123 dots[i].onclick=function(){
124 var $index=parseInt(this.getAttribute("index"));
125 slider.style.marginLeft=($index)*(-600)+"px";
126 index=$index;
127 }
128 }
129 }
130 dotsInit();
131 function animate(option){
132 var sliderLeft=slider.offsetLeft;
133 slider.style.marginLeft=parseInt(sliderLeft)+option+'px';
134 }
135 function dotsTurn(){
136 for(var i=0;i<dots.length;i++){
137 if(dots[i].getAttribute('index')==index){
138 dots[i].className='dot'
139 }else{
140 dots[i].className=''
141 }
142 }
143 }
144 prev.onclick=function(){
145 if(slider.offsetLeft % 600 !=0){
146 return;
147 }
148 slider.style.transition="0.5s";
149 animate(600);
150 (index==1)?(index=5):index--;
151 }
152 next.onclick=function(){
153 if(slider.offsetLeft % 600 !=0){
154 return;
155 }
156 slider.style.transition="0.5s";
157 animate(-600);
158 (index==5)?(index=1):index++;
159 }
160 slider.addEventListener("transitionend",function(){
161 if(slider.offsetLeft==-3600){
162 slider.style.transition="0s";
163 slider.style.marginLeft="-600px";
164 }
165 if(slider.offsetLeft==0){
166 slider.style.transition="0s";
167 slider.style.marginLeft="-3000px";
168 }
169 dotsTurn();
170 });
171 function init(){
172 slider.style.transition="0.5s";
173 timer=setInterval(next.onclick,5000);
174 }
175 init();
176 slider.addEventListener('mouseenter',function(){
177 clearInterval(timer);
178 })
179 slider.addEventListener('mouseout',init)
180 </script>
181 </body>
182 </html>
