轮播图

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7     /*重置css默认样式*/
 8     html,body,div,ul,li,ol{margin:0;padding:0;list-style:none;text-decoration:none;}
 9     
10     /*定义外层div的样式*/
11     #main{width:500px;height:300px;margin:20px auto;border:2px solid black;position:relative;overflow:hidden;}
12     
13     /*定义外层div内部的ui和li的样式*/
14     #main ul{height:300px;position:absolute;}
15     #main ul li{width:500px;height:300px;float:left;background:red;text-align:center;line-height:300px;font-size:20px;}
16     #main ul li:nth-child(1){background:yellow;}
17     #main ul li:nth-child(2){background:blue;}
18     
19     /*定义外层与div同级的ol和li的样式*/
20     ol{height:20px;margin:0 auto;}
21     ol li{width:50px;height:20px;text-align:center;line-height:20px;float:left;}
22     ol li:hover{cursor:pointer;}
23 </style>
24 </head>
25 <body>
26     <div id="main">
27         <ul>
28             <li>第一张</li>
29             <li>第二章</li>
30             <li>第三账</li>
31         </ul>
32     </div>
33     <ol>
34         <li>《一》</li>
35         <li>《二》</li>
36         <li>《三》</li>
37     </ol>
38 </body>
39 <script>
40 
41     var oul = document.getElementsByTagName('ul')[0];
42     var ali = oul.getElementsByTagName('li');
43 
44     var ool = document.getElementsByTagName('ol')[0];
45     var _ali = ool.getElementsByTagName('li');
46 
47     var odiv = document.getElementsByTagName('div');
48 
49     var time = null;
50 
51     oul.style.width=ali[0].offsetWidth*ali.length+'px';
52     ool.style.width=_ali[0].offsetWidth*_ali.length+'px';
53 
54     function atr(a){
55         var speed = 0;
56         clearInterval(time)
57         time = setInterval(function(){
58             // oul.style.left=-ali[0].offsetWidth*a+'px'
59             speed = (-ali[0].offsetWidth*a-oul.offsetLeft)/7
60             speed>0?speed=Math.ceil(speed):speed=Math.floor(speed)
61             if(oul.offsetLeft==-ali[0].offsetWidth*a){
62                 clearInterval(time)
63             }
64             else{
65                 oul.style.left=oul.offsetLeft+speed+'px'
66             }
67         },20)
68     }
69 
70     for(var i = 0 ;i<_ali.length;i++){
71         _ali[i].index = i ;
72         _ali[i].onclick=function(){
73             atr(this.index)
74         }
75     }
76 
77 </script>
78 </html>