自定義jQuery滑塊

Question

我想在jQuery中創建一個滑塊，並在最後卡住。

我已經創建了一個<ul>，然後4 <li>在那個<ul>代表每個<li>幻燈片。當我點擊下一個按鈕時，幻燈片1被動畫爲幻燈片2.當我點擊下一個按鈕時，當前幻燈片被動畫到下一個。但是，如何爲最後一張幻燈片加載第一張幻燈片。

我將左側屬性的值更改爲幻燈片之間的動畫。代碼如下。請指導我。謝謝！

 current = 0; 

     current_slide=1; 

     $(document).ready(function(){ 
      var totalSlides=$(".slider ul li").length; 
      $(".slider ul").removeAttr('width'); 
      $(".slider ul").attr('width',951*totalSlides); 

      $('#next img').click(function(){ 
       current_slide++; 
       current -= 951; 
       if(current_slide>totalSlides) 
        { 
         current=0; 
         current_slide=1; 
         $(".slider ul").css('left',0);  
        } 
       $(".slider ul").animate({"left":current+"px"}, "slow"); 
      }); 

     /* Previous button is not fully functional yet*/ 
      $('#prev img').click(function(){ 
       current_slide--; 
       current += 951; 
       if(current_slide==1) 
        {current=0;current_slide=totalSlides;} 
       $(".slider ul").animate({"left":current+"px"}, "slow"); 
      }); 
     }); 

Answer 1

我不知道你所說的「負荷1幻燈片」的意思是，當你到你的幻燈片任你到底有沒有應該出現的代碼後退。但從看你的代碼，如果你只是刪除$(".slider ul").css('left',0);它應該工作。

此外，在前面的代碼中，我將當前數字從零更改爲951 * totalSlides，以將其置於正確的位置 - 我沒有對其進行測試，因此可能需要使用951 * (totalSlides - 1)。

current = 0; 

    current_slide=1; 

    $(document).ready(function(){ 
     var totalSlides=$(".slider ul li").length; 
     $(".slider ul").removeAttr('width'); 
     $(".slider ul").attr('width',951*totalSlides); 

     $('#next img').click(function(){ 
      current_slide++; 
      current -= 951; 
      if(current_slide>totalSlides) 
       { 
        current=0; 
        current_slide=1;  
       } 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
     }); 

    /* Previous button is not fully functional yet*/ 
     $('#prev img').click(function(){ 
      current_slide--; 
      current += 951; 
      if(current_slide==1) 
       { 
        current = 951 * totalSlides; 
        current_slide = totalSlides; 
       } 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
     }); 
    }); 

也要注意這裏是jQuery的a bug當你已經離開>負位於萬個像素動畫 - 它被安排固定在1.5版本。所以，如果你使用了大量幻燈片，我建議切換代碼中使用scrollLeft

---

更新：

那麼如果你想要一個無限的滑塊，有兩種方法可以使用：

1. 堆疊所有幻燈片並隱藏除當前幻燈片以外的所有幻燈片。當用戶單擊下一個或上一個按鈕時，將下一張幻燈片放在適當的一側，將當前幻燈片放到視圖中，並將新幻燈片放入視圖中 - 查看使用此方法的此jQuery Slider。

2. 第二種方法浮動所有幻燈片，然後複製第一張和最後一張幻燈片。第一張幻燈片在最後添加，最後一張幻燈片在第一張之前添加。然後，當你在最後一張幻燈片上，然後按下，克隆的幻燈片就會進入視圖。動畫完成後，將視圖重新定位到第一張幻燈片。這個方法用於我的jQuery AnythingSlider。