簡單實現jQuery進度條輪播實例代碼

2019-11-20 09:40:01

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了jQuery進度條輪播的具體實現代碼，供大家參考，具體內容如下
HTML：

<div class="bannar">      <div class="img">        <ul>          <li style="background:url(img/1.jpg);display:block;"></li>          <li style="background:url(img/2.jpg);"></li>          <li style="background:url(img/3.jpg);"></li>          <li style="background:url(img/4.jpg);"></li>        </ul>      </div>      <div class="text">        <ul>          <li>0</li>          <li>1</li>          <li>2</li>          <li>3</li>        </ul>      </div>      <div class="nav">        <ul>          <li><p></p></li>          <li><p></p></li>          <li><p></p></li>          <li><p></p></li>        </ul>      </div>    </div>

CSS：

<style>    *{      margin:0 auto;      padding:0;    }        .bannar{      width:100%;      height:490px;      position:relative;    }    .img{      width:100%;      height:490px;      overflow:hidden;    }    .img ul li{      width:100%;      height:490px;      list-style-type: none;      display:none;    }    .text{      width:1000px;      height:6px;      position:absolute;      bottom:28px;      left:50%;      margin-left:-500px;    }    .nav{      width:1000px;      height:10px;      position:absolute;      bottom:4px;      left:50%;      margin-left:-500px;    }    .text ul li{      width:200px;      height:100%;      float:left;      margin-left:38px;      list-style-type: none;          }    .nav ul li{      width:200px;      height:10px;            float:left;      margin-left:38px;      list-style-type: none;      background:gray;    }    .nav ul li p{      width:0px;      height:100%;      background:red;      float:left;    }  </style>

Javascript：

<script>      var i=0;      var time_id=null;      function auto(){        $(".nav ul li").eq(i).find("p").animate({          "width":"200px"        },3900,function(){          i++;          $(this).css("width", '0px');          if(i>3){            i=0;          }          $(".img ul li").eq(i).fadeIn(300).siblings().fadeOut(300);        });      }      time_id=setInterval("auto()",4000);            $(".text ul li").click(function(){        $(".nav ul li").find("p").stop().css("width","0px");        clearInterval(time_id);        i=$(this).index();        $(".img ul li").eq(i).fadeIn().siblings().fadeOut();        auto();        time_id=setInterval("auto()",4000);      });      $(".nav ul li").click(function(){        $(".nav ul li").find("p").stop().css("width","0px");        clearInterval(time_id);        i=$(this).index();        $(".img ul li").eq(i).fadeIn().siblings().fadeOut();        auto();        time_id=setInterval("auto()",4000);      })          </script>

效果圖：