<!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> <title></title> <style> .active { color: Red; } </style> <script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script> </head> <body> <div id="divOne"> <ul id="banner"> <li> <img src='http://future.iptid.com/Files/News/52714d00-5a01-4c5a-9a47-41d2ec9d4ca2.jpg' /></li> <li style="display: none"> <img src='http://future.iptid.com/Files/News/a2f39039-d17f-4085-8d99-8c214a474f34.jpg' /></li> <li style="display: none"> <img src='http://future.iptid.com/Files/News/1fd79e78-616f-4fbf-b35f-94703a1017ee.jpg' /></li> <li style="display: none"> <img src='http://future.iptid.com/Files/News/9317e802-7cdb-4acb-823a-49bd9d8e5923.jpg' /></li> </ul> <div id="dot"> <ul> <li class="active">1 </li> <li>2 </li> <li>3 </li> <li>4 </li> </ul> </div> </div> <div id="txtTimer"> </div> <script type="text/javascript"> var arr = new Array("6000", "8000", "9000", "9000"); var bannerlength = 0; var i = 0; var _timer = 0; var _stepping = 1000; var bannerTimer = null; function turnChange() { if (_timer < arr[i]) { _timer += _stepping; } else { _timer = 0; ++i; if (i > bannerlength) { i = 0; } $("#banner li").eq(i).show().siblings().hide(); $("#dot li").eq(i).addClass("active").siblings().removeClass("active"); } $("#txtTimer").text(_timer); }; $(function () { bannerlength = $("#banner li").length; bannerTimer=setInterval(turnChange, _stepping); }); $(function () { $("#dot li").click(function () { clearInterval(bannerTimer); i = $(this).index(); _timer = 0; $("#banner li").eq(i).show().siblings().hide(); $("#dot li").eq(i).addClass("active").siblings().removeClass("active"); bannerTimer=setInterval(turnChange, _stepping); }); }); // setTimeout("show()", arr[i]); // function show() { // ++i; // $("#banner li").eq(i).show().siblings().hide(); // $("#dot li").eq(i).addClass("active").siblings().removeClass("active"); // setTimeout("show()", arr[i]); // } // $(function () { // $("#dot li").click(function () { // i = $(this).index() - 1; // setTimeout("show()", arr[i]); // }); // }); </script> </body> </html>
转载于:https://www.cnblogs.com/ft-Pavilion/p/5368399.html