jquery图片轮播,单张图片轮播时间不同

<!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="displaynone">                 <img src='http://future.iptid.com/Files/News/a2f39039-d17f-4085-8d99-8c214a474f34.jpg' /></li>             <li style="displaynone">                 <img src='http://future.iptid.com/Files/News/1fd79e78-616f-4fbf-b35f-94703a1017ee.jpg' /></li>             <li style="displaynone">                 <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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值