基于jQuery实现左右图片轮播（原理通用）

本文为大家分享了jQuery实现左右图片轮播代码，供大家参考，具体实现内容如下

运行效果图：

重点！！！

实现原理：

通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值，来达到一个轮播的效果。

具体代码：

 
  
  
 
 
 
  .banner{
   margin:0 auto;
   border: 4px dashed black;
   width:400px;
   height:200px;
   position: relative;
   overflow:hidden;
  }
  .banner a{
   z-index: 100;
   display: block;
   width:100%;
   height: 100%;
   position: absolute;
   left:100%;
   top:0;
  }
  .banner .first{
   left:0;
  }
  .banner a img{
   width:100%;
   height: 100%;
  }
  .choose{
   z-index: 1000;
   position: absolute;
   left:150px;
   top:180px;
   width:100px;
   height: 10px;
  }
  .choose span{
   margin-right: 15px;
   float: left;
   display:block;
   background: blue;
   width:10px;
   height: 10px;
   border-radius: 10px;
  }
  .choose span:hover{
   background: red;
  }
  .choose .red{
   background: red;
  }
  .banner .pre,.next{
   cursor:pointer;
   text-align:center;
   border-radius:20px;
   display:block;
   background:#cccccc;
   opacity:0.4;
   text-decoration: none;
   z-index: 200;
   display:block;
   width:40px;
   height: 40px;
   font-size: 40px;
   color:red;
   position: absolute;
   top:80px;
  }
  .banner .pre{
   left:0px
  }
  .banner .next{
   right: 0px;
  }
 
 
  
  
   
   -
   +
   
   
   
   
   
   
   
    
    
    
    
   
  
  
  
 

精彩专题分享：jQuery图片轮播 Javascript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，帮助大家实现一个简单大方的图片轮播效果。