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;"> </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>

　　推荐阅读

　　jquery动画1.加载指示器

该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。　　动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。什么时候使用动画>>>详细阅读

本文标题：javascript五图轮播切换实用版

地址：http://www.17bianji.com/kaifa2/JS/23149.html

1/2 1