【實踐】純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"); 
       
   }
   
   
   
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。