今天发表一个自己刚学js的练习，javascript五图轮播切换---实用版，这个实力有个缺陷就是没有过渡效果，这个本人也还在研究中，也希望高手可以指点一下！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>测试</title> <meta name="author" content="ximan"> <meta name="keywords" content=""> <meta name="description" content=""> <link type="text/css" rel="stylesheet" href="index.css"> </head> <body> <div class="content"> <ul id="num"> <li style="background: #f00;"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> <ul id="img_box"> <li> <a href="#"> <img src="pailabi_shop1.jpg" alt="哈哈哈" /> </a> </li> <li> <a href="#"> <img src="pailabi_shop2.jpg" alt="哈哈哈" /> </a> </li> <li> <a href="#"> <img src="paila_shop3.jpg" alt="哈哈哈" /> </a> </li> <li> <a href="#"> <img src="paila_shop4.jpg" alt="哈哈哈" /> </a> </li> <li> <a href="#"> <img src="paila_shop5.jpg" alt="哈哈哈" /> </a> </li> </ul> </div> <script type="text/javascript"> </script> <script type="text/javascript"> window.onload=function (){ var num = document.getElementById("num"); var num_li = document.getElementById("num").getElementsByTagName("li"); var img_box = document.getElementById("img_box"); var img_box_li = document.getElementById("img_box").getElementsByTagName("li"); var bliw = img_box_li[0].offsetWidth; var n = 0; img_box.style.left = 0 var autoscroll = setInterval(auto,3000); for (var i = 0;i < num_li.length;i++){ num_li[i].onmouseover = function(){ clearInterval(autoscroll); for (var i = 0;i < num_li.length;i++){ num_li[i].style.background = ""; if(num_li[i]==this){ this.style.background = "#f00"; slide(i); } } } num_li[i].onmouseout = function(){ for (var i = 0;i < num_li.length;i++){ if(num_li[i]==this){ n = i; autoscroll = setInterval(auto,3000) } } } } function slide(i){ img_box.style.left = -bliw*i + "px"; } function auto(){ n++; if(n == img_box_li.length){ n =0; } for (var i =0;i < num_li.length;i++){ num_li[i].style.background = ""; } num_li[n].style.background = "#f00"; slide(n); } } </script> </body> </html>