<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> *{ padding: 0; margin: 0; } img{ vertical-align: top; }.box{width: 500px;height: 200px;border: 1px solid #000;padding: 10px;margin: 50px auto;position: relative;}.top{width: 500px;height: 500px;overflow: hidden;position: relative;}ul,ol{list-style: none;}ul{width: 1000%;position: absolute;top: 0;left: 0;}ul li{float: left;}ol{position: absolute;right:50px;bottom: 30px; }ol li{width: 15px;height: 15px;background-color: #fff;float: left;margin-right: 10px;text-align: center;line-height: 15px;}.cur{background-color: orange;} </style> </head> <body> <div id="box"> <div > <ul id="ul"> <li><img src="images/taobao/1.jpg" alt=""></li> <li><img src="images/taobao/2.jpg" alt=""></li> <li><img src="images/taobao/3.jpg" alt=""></li> <li><img src="images/taobao/4.jpg" alt=""></li> <li><img src="images/taobao/5.jpg" alt=""></li> </ul> </div> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <script> var box=document.getElementById("box"); var ul=document.getElementById("ul"); var ulis=ul.children; var olis=box.children[1].children; var leader=0,target=0,timer=null; var num=0; setInterval(function(){ num+=1 for (var i = 0; i < olis.length; i++) { for (var j = 0; j < olis.length; j++) { olis[j].className=""; }; if (num>4) { num=0; } else{ olis[num].className="cur"; } } ul.style.left=-num*500+"px"; }, 1000) </script> </body></html>
添加回答
举报
0/150
提交
取消