简单实现jQuery进度条轮播实例代码

本文实例为大家分享了jQuery进度条轮播的具体实现代码，供大家参考，具体内容如下 
HTML： 

      
 

   

   

   

   

 
      
      
 

   
0
   
1
   
2
   
3
 
      
      
 

   

   

   

   

 
      
    

CSS： 

    *{
      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;
    }
  

Javascript： 

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。