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>