自動啓動jQuery滑塊

我使用的是一個腳本，點擊左側或右側的下一個div動畫。它目前工作正常，但我正在尋找添加兩個功能。我需要它重複回到第一張幻燈片，如果點擊它通過了最後一張幻燈片，並且如果從第一張幻燈片中點擊返回，則轉到最後一張幻燈片。另外，我有興趣在頁面加載時自動啓動。自動啓動jQuery滑塊

我試過包裝功能中的點擊和設置setTimeout，但它似乎並沒有工作。該動畫目前正在使用CSS。

這裏的電流JS：

<script> 
jQuery(document).ready(function() { 
var boxes = jQuery(".box").get(), 
    current = 0;  

jQuery('.right').click(function() { 
    if (current == (-boxes.length + 1)){ 
     } else { 
     current--; 
    updateBoxes(); 
    } 
console.log(-boxes.length + 1); 
    console.log(current); 
}); 

jQuery('.left').click(function() { 
    if (current === 0){ 
    } else{ 
    current++; 
    updateBoxes(); 
    } 
}); 

function updateBoxes() { 
    for (var i = current; i < (boxes.length + current); i++) { 
     boxes[i - current].style.left = (i * 100 + 50) + "%"; 
    } 

} 
}); 
</script>

讓我知道如果我需要一個更好的代表性一個的jsfiddle。到目前爲止，我認爲代碼非常簡單，只需點擊即可進行動畫製作。

謝謝。

來源

2014-02-11 Taylor Jones

嘿，看起來不錯！有幾件事情在我身上彈出：1）不需要調用一個空的jQuery（）。get（）（只是jQuery（）很好）2）考慮重構/重寫代碼並創建一個簡單的「動畫」將參數傳遞給。這些參數將決定左/右動畫。這樣，您的右/左鍵單擊處理程序可以調用相同的函數，只需傳遞參數即可。然後，您可以將該功能用於自動滑塊（通過定時器）。 3）一旦你掌握了這一點，那麼一些CSS轉換/轉換！：）玩的開心！ – Jack

謝謝傑克，明天早上我會放棄它。我想我應該重寫它在腳本內動畫，而不是使用CSS來製作動畫。 –

太棒了！我同意 - 當你需要自動化，甚至重構使用不同的動畫元素動畫方法時，擁有單點動畫將會有所幫助。 – Jack

嘗試

jQuery(document).ready(function() { 
    var boxes = jQuery(".box").get(), 
     current = 0, 
     timer; 

    jQuery('.right').click(function() { 
     if (current == (-boxes.length + 1)) { 
      current = 0; 
     } else { 
      current--; 
     } 
     updateBoxes(); 
    }).click(); //initialize the view 

    jQuery('.left').click(function() { 
     if (current === 0) { 
      current = -boxes.length + 1; 
     } else { 
      current++; 
     } 
     updateBoxes(); 
    }); 

    function updateBoxes() { 
     //custom implementation for testing 
     console.log('show', current) 
     $(boxes).hide().eq(-current).show(); 

     autoPlay(); 
    } 

    function autoPlay() { 
     clearTimeout(timer); 
     //auto play 
     timer = setTimeout(function() { 
      jQuery('.right').click(); 
     }, 2500) 
    } 

});

演示：Fiddle

來源

2014-02-11 08:03:37

此自動在第二張幻燈片上的滑塊開始位置點擊右側。它也不會重置setInterval，當你單擊右箭頭時，如果你點擊右鍵1秒，然後在第二秒之後動畫，它將運行該函數。這雖然讓我更好地瞭解如何使用它！ –

@taylorqj嘗試更新 –

感謝您的更新版本。我試了一下，它按預期工作。我必須將hide（）show（）更改爲動畫以更改CSS樣式，以便用css動畫進行滑動，但現在它可以隱藏/顯示。但是，它仍然會首先加載第二張幻燈片。我可以找出這一個:)謝謝。 –

這裏是基於我的評論（主要是僞代碼）的例子：

$(function(){ 
    var boxes = $('.box'), 
     current = 0, 
     timer; 

    // Handler responsible for animation, either from clicking or Interval 
    function animation(direction){ 
     if (direction === 1) { 
      // Set animation properties to animate forward 
     } else { 
      // Set animation properties to animate backwards 
     } 

     if (current === 0 || current === boxes.length) { 
      // Adjust for first/last 
     } 

     // Handle animation here 
    } 

    // Sets/Clears interval 
    // Useful if you want to reset the timer when a user clicks forward/back (or "pause") 
    function setAutoSlider(set, duration) { 
     var dur = duration || 2000; 
     if (set === 1) { 
      timer = setInterval(function(){ 
       animation(1); 
      }, dur); 
     } else { 
      clearInterval(timer) 
     } 
    } 

    // Bind click events on arrows 
    // We use jQuery's event binding to pass the data 0 or 1 to our handler 
    $('.right').on('click', 1, function(e){animation(e.data)}); 
    $('.left').on('click', 0, function(e){animation(e.data)}); 

    // Kick off animated slider 
    setAutoSlider(1, 2000);

玩得開心！如果你有任何問題隨時問！

來源

2014-02-11 08:18:58 Jack

自動啓動jQuery滑塊

回答

相關問題