自定義jQuery滑塊，返回第一張幻燈片

我正在通過構建帶有3張幻燈片的簡單滑塊來練習我的jQuery技能。有一個名爲滑塊包裝的外層包裝，其設置寬度爲1400px，高度爲350px。自定義jQuery滑塊，返回第一張幻燈片

在這個包裝內部是一個無序列表，其項目向左浮動，以便它們以水平線顯示。然後將整個無序列表動畫化，向左移動1400px，從而進行滑動。我正在努力弄清楚如何返回到第一張幻燈片，而沒有看起來很糟糕。這裏是我的html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <script type="text/javascript" src="jquery-1.11.1.js"></script> 
    <script type="text/javascript" src="slider.js"></script> 
     <style> 
      * { margin: 0; padding: 0; } 
      #sliderwrapper { width: 1400px; height: 350px; overflow: hidden; position:relative;} 
      #sliderlist { list-style: none; left: 0px; position:absolute; width:200000em;} 
      .item { float: left; } 

     </style> 
    </head> 


<body> 

    <div id="sliderwrapper"> 

     <ul id="sliderlist"> 
      <li class="item 1"> 
       <div><img src="img1.png" /></div> 
      </li> 
      <li class="item 2"> 
       <div><img src="img2.png" /></div> 
      </li> 
      <li class="item 3"> 
       <div><img src="img3.png" /></div> 
      </li> 
     </ul> 

    </div> 

</body> 
</html>

這裏是我的jQuery：

$(document).ready(function() { 


    setInterval(slide, 1000); 

    function slide() { 

     var left = $('#sliderlist').css('left'); 
     left = left.substring(0, left.length - 2); 
     if (left <= -2800) { 

      /*var slide = $('#sliderlist li:first'); 
      $('#sliderlist').children('li:first').remove(); 
      $('#sliderlist').append(slide);*/ 

      $('#sliderlist').css('left', '0px'); 
      $('#sliderlist').animate({ left: "-=1400" }, "slow", "swing"); 
     } 
     else { 
      $('#sliderlist').animate({ left: "-=1400" }, "slow", "swing"); 


     } 
    } 

});

每1秒的幻燈片功能，動畫列表的左側，被調用。一旦顯示最後一張幻燈片（在-2800px），第一張幻燈片需要再次顯示，但是我希望它與其他幻燈片一樣滑動，而不是僅顯示。如果我將left屬性設置爲0px，那麼它就會出現，如果我刪除並追加一個常量循環中的項目，那麼動畫看起來很醜。

來源

2014-09-02 Mikey

你可以創建一個小提琴嗎？ – 2014-09-02 07:02:59

http://jsfiddle.net/f6rey710/ – Mikey 2014-09-02 07:27:41

正如你可以看到第一個紅色幻燈片剛剛出現而不是滑入，我試圖找到一種方式讓它滑動，所以滑動看起來不變 – Mikey 2014-09-02 07:28:39

我設法找到一個解決辦法，那就是：

http://jsfiddle.net/f6rey710/1/

function slide() { 

     var left = $('#sliderList').css('left'); 
     left = left.substring(0, left.length - 2); 
     if (left <= -800) { 


      $('#sliderList').css('left', '-400px'); 
      var slide = $('#sliderList li:first'); 
      $('#sliderList').children('li:first').remove(); 
      $('#sliderList').append(slide); 
      $('#sliderList').animate({ left: "-=400px" }, "slow", "swing"); 

     } 
     else { 
      $('#sliderList').animate({ left: "-=400" }, "slow", "swing"); 
     } 
    }

一旦滑動功能已達到列表中的列表元素的結束必須的前面取出排隊並添加到最後。

來源

2014-09-02 11:35:21 Mikey

當您使用動畫滑動您的幻燈片時，使用某些動畫將動畫重新設置爲0會怎樣？例如

if (left <= -800) { 
    $('#sliderlist').animate({ 
     left: "0px" 
    }, "slow", "swing"); 
} else { 
    $('#sliderlist').animate({ 
     left: "-=400" 
    }, "slow", "swing"); 
}

動畫從最後一張幻燈片與一些動畫的第一張幻燈片，它看起來正常的，這是許多jQuery的滑塊工作的方式。

來源

2014-09-02 07:33:53

我確實嘗試過，看起來相當不錯，但我試圖看看是否有可能不必滑過所有其他幻燈片以回到第一個幻燈片 – Mikey 2014-09-02 07:37:06

自定義jQuery滑塊，返回第一張幻燈片

回答

相關問題