Posted in Javascript onAugust 17, 2012
<!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;"> </li> <li> </li> <li> </li> <li> </li> <li> </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>
javascript五图轮播切换实用版
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@