jquery实现简单自动轮播图效果

本文实例为大家分享了jquery实现简单自动轮播图的具体代码，供大家参考，具体内容如下

代码：

  
  
  
  
  
    ul,li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #box{
      width: 520px;
      height: 280px;
      margin: 100px auto;
      position: relative;
    }
    #box .list li{
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    #box .list li.current{
      display: block;
    }
    #box .count{
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
    #box .count li{
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fa0;
      text-align: center;
      line-height: 20px;
      margin-left: 10px;
      color: #fff;
      opacity: 0.8;
      cursor: pointer;
    }
    #box .count li.current{
      background-color: #f60;
      opacity: 1;
    }
    #box .btn{
      position: absolute;
      bottom:10px;
      right: 15px;
    }
    
    #box .btn li{
      width: 50px;
      height: 50px;
      background-color: #ccc;
      float: right;
      margin-left: 15px; 
      opacity: 0.8;
      cursor: pointer;
      text-align: center;
      line-height: 50px;
    }
  


  
    
 
      

      

      

      

      

    
    

      
1
      
2
      
3
      
4
      
5
    
    

      
>
      
<
    
  

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