【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮

时间 2019-11-21

原文原文链接

在此随笔以前，博主已经作过一次图片滑动轮播，如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果，就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果，这是很不美观的，固然也有网站是这样作。但博主参照过不少网站的图片轮播基本上都是无缝的（一张紧接着一张），因此博主也决定本身作一个。javascript

作这个以前博主还在某客学院看了视频教程，此方法为纯jquery方法，比js混合jq方法易懂简洁因此有必要给你们分享一下css

先上html代码以及css代码html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="ongradeanimationCtrl.js" type="text/javascript"></script>
<style type="text/css">
*{
    padding:0px;
    margin:0px;
    border:0px;
}
li{
    list-style-type:none;
}
a{
    text-decoration:none;
}
#wrapper{
    margin:0px auto;
    border:0px;
    padding:0px;
}
#show-area{
    width:800px;
    height:450px;
    position:relative;
    margin:0px auto;
    overflow:hidden;
}
#show-area ul{
    position:relative;
    width:4800px;
    height:450px;
    right:0;
}
#show-area ul li{
    float:left;
    width:800px;
}
#controler{
    width:120px;
    text-align:center;
    position:absolute;
    top:425px;
    left:370px;
    z-index:1;
}
#controler div{
    height:15px;
    width:15px;
    border-radius:100%;
    background-color:#ccc;
    float:left;
    margin-left:5%;
    opacity:0.9;/*透明度50%*/
    filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
}
#button-left{
    /*display:none;*/
    color:#fff;
    position: absolute;
    top: 189px;
    left: 0px;
    width: 60px;
    height: 60px;
    z-index:2;
    background:url(images/left.jpg);
    border-radius:100%;
    background-size:cover;
    opacity:0.5;/*透明度50%*/
    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
}
#button-right{
    /*display:none;*/
    color:#fff;
    position: absolute;
    top: 189px;
    left: 740px;
    width: 60px;
    height: 60px;
    z-index:2;
    background:url(images/right.jpg);
    border-radius:100%;
    background-size:cover;
    opacity:0.5;/*透明度50%*/
    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
}
.onclick{
    background-color:#FFF !important;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="show-area">
  
     <ul>
     
       <li><a href="#"><img src="images/p1.jpg"></a></li>
       <li><a href="#"><img src="images/p2.jpg"></a></li>
       <li><a href="#"><img src="images/p3.jpg"></a></li>
       <li><a href="#"><img src="images/p4.jpg"></a></li>
       
     </ul>
     
      <div id="button-left" title="下一张"></div>
      <div id="button-right" title="上一张"></div>
      
    <div id="controler"></div><!--控制按钮,为了往后方便后台操做这里的控制按钮在js代码中控制添加-->
  </div>
</div>
</body>
</html>

jquery代码java

$(function(){
   var i = 0;
   var imgWidth = $("#show-area ul li").width();
   
   var clone = $("#show-area ul li").first().clone();
   $("#show-area ul").append(clone);
   //复制第一张图片而且添加到最后达到无缝链接的效果
   
   var size = $("#show-area ul li").size();//获得全部li的个数
   
   
   /*第一步*/
   //一开始循环添加按钮
   for(var j = 0 ; j<size - 1 ; j++){
     $("#controler").append("<div></div>");   
       
   }
   //为何要size - 1？由于最后一张图片只是做一个过渡效果咱们显示的始终仍是4张图片
 //因此添加按钮的时候咱们也应该添加4个按钮
   $("#controler div").eq(0).addClass("onclick");
   
   
   
   
   /*第二步*/
   //左按钮
   $("#button-left").click(function(){
      Toleft();
      
   })
   
   
   //右按钮
   $("#button-right").click(function(){
      Toright();
      
   })
   
  
  
  
  
  
   /*第3步*/
   //按钮移出移入事件
   $("#controler div").hover(function(){
    i = $(this).index();  
    clearInterval(timer);
    $("#show-area ul").stop().animate({left:-i * imgWidth});
    $(this).addClass("onclick").siblings().removeClass("onclick");
    $("#index").html("index的值：" + index);
    
    
    
   },function(){
     timer = setInterval(function(){
     Toleft();    
       
   },3000)    
        
   })      
   
   
   //ul鼠标移出移入事件
   $("#show-area ul").hover(function(){
     clearInterval(timer);
     
   },function(){
      timer = setInterval(function(){
     Toleft();    
       
   },3000)     
       
   })
   
   //两个方向按钮鼠标移出移入事件
   $("#button-left,#button-right").mouseover(function(){
       clearInterval(timer);
       
   }).mouseout(function(){
     timer = setInterval(function(){
        Toleft();    
       
     },3000)    
   })
   

   //定时器
   var timer = setInterval(function(){
     Toleft();    
       
   },3000)   
   
   
   
   
   /*第2.1步*/
   //左按钮实现的函数
   function Toleft(){
       
     i++;
     if(i==size){
        //当当前图片为最后一张图片的时候（咱们一开始复制而且添加到ul最后面的图片）而且再点击了一次左按钮，这时候咱们就利用css的快速转换效果把ul移动第一张图片的位置而且第二张图片滑入达到无缝效果（css的变换效果很快咱们肉眼是很难看见的）
        $("#show-area ul").css({left:0});
        i = 1;     
     }
     $("#show-area ul").stop().animate({left:-i*imgWidth},1000);
     
     if(i == size -1){
        $("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick"); 
           
     }else{
       $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");      
           
    }
       
     
     
     
   }
   
   
   /*第2.2步*/
   //右按钮实现的函数
   function Toright(){
       
       //同理，若是当前图片位置是第一张图片我再按一下右按钮那么咱们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），而且让倒数第二张图片滑动进来
      i--;
      if(i==-1){
         $("#show-area ul").css({left:-(size - 1)*imgWidth});
         i=size-2;    
          
      }   
      $("#show-area ul").animate({left:-i*imgWidth},1000);  
      $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick"); 
       
   }
   
   
   
});