如何讓滑塊在數秒後滑動？

我有一種滑塊，其元素定義的標記如下所示：如何讓滑塊在數秒後滑動？

<div class="content-switcher" id="Content1">

而且我也有內容2，和Content3，以及它們的裏面，我有一些其他代碼的東西被顯示。然後，在頁面頂部我有這樣的事情：

<div class="progress-container"> 

     <a href="" class="item-number" onclick="selectStep(1); return false;">1</a> 
     <a href="" class="item-number" onclick="selectStep(2); return false;">2</a> 
     <a href="" class="item-number" onclick="selectStep(3); return false;">3</a> 

      <div class="progress-selected"></div> 

    </div>

而且我selectStep函數的定義是這樣的：

function selectStep(n){ 

    if(n==1){ 
     $(".progress-selected").animate({marginLeft: '5px'},300); 
    }else if(n==2){ 
    $(".progress-selected").animate({marginLeft: '72px'},300); 
    }else if (n==3){ 
    $(".progress-selected").animate({marginLeft: '132px'},300); 
    } 
    $(".content-switcher").hide(); 
    $("#Content"+n).fadeIn(); 
}

因此，問題是，當我打開網頁，它顯示滑塊的第一張幻燈片，這對我來說是可以的，如果我點擊數字來改變幻燈片，但是我希望在第一張幻燈片中停留3秒後，我希望它自動移動到第二個幻燈片，然後第三個幻燈片並再次回到第一個，並且永遠如此。我想我需要使用像setTimeout這樣的東西，但不知道如何實現它。請注意，它應該工作，我的意思是當頁面加載。任何想法？

來源

2014-10-20 tett

'setTimout（函數（）{警報（ 'A'）}，3000）;' – Justinas 2014-10-20 14:15:46

@Justinas有沒有叫'setTimout'功能和'setTimeout'將被調用一次並沒有解決OP的問題。您需要使用'setInterval'，以便多次調用該函數。 – 2014-10-20 14:18:36

@ WissamEl-Kik抱歉，錯字。但'setTimeout'更好，因爲你手動指定何時再次運行函數，而且我總是使用'setTimeout'。 – Justinas 2014-10-20 14:35:28

您將需要使用window.setInterval而不是setTimeout。某事沿着;

// set the variable which holds the number of steps/slides you have 
var totalSteps = 3; 
// set the current selected step, default is the first slide. 
var selectedStep = 1; 
// assign this to a variable so you can use later 
var myInterval = null; 

var start = function(){ 

    myInterval = window.setInterval(function(){ 

     // increment the step 
     selectedStep++; 

     // check that we are not attempting to select a step that doesn't exist 
     if (selectedStep > totalSteps){ 
      // reset back to 1 
      selectedStep = 1; 
     } 

     // call the function with the selected step 
     selectStep(selectedStep); 

    }, 3000);   

};

只需撥打start();即可啓動代碼。

如果您想隨時取消間隔，您可以撥打window.clearInterval(myInterval);，然後再次通過撥打start();重新啓動。

退房這裏工作演示在jsbin

enter image description here

來源

2014-10-20 14:16:50

工程就像一個魅力！謝謝。 – tett 2014-10-20 14:38:13

樂意提供幫助。另一個小費，看看緩存你的jQuery選擇器。 'var $ progressSelected = $（「。progress-selected」）;'https://eamann.com/tech/selector-caching-jquery/ – 2014-10-20 14:49:31

下面的代碼：

var slide_number = 1; 
 
var sliding_speed = 3000; 
 
var max_number_of_slides = 3; 
 
$(document).ready(function() { 
 
    setInterval(selectStep(slide_number), sliding_speed); 
 
}); 
 

 
function selectStep(n) { 
 
    if (n == 1) { 
 
    $(".progress-selected").animate({ 
 
     marginLeft: '5px' 
 
    }, 300); 
 
    } else if (n == 2) { 
 
    $(".progress-selected").animate({ 
 
     marginLeft: '72px' 
 
    }, 300); 
 
    } else if (n == 3) { 
 
    $(".progress-selected").animate({ 
 
     marginLeft: '132px' 
 
    }, 300); 
 
    } 
 
    $(".content-switcher").hide(); 
 
    $("#Content" + n).fadeIn(); 
 
    if (slide_number == max_number_of_slides) slide_number = 0; 
 
    slide_number = slide_number++; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="progress-container"> 
 
    <a href="" class="item-number">1</a> 
 
    <a href="" class="item-number">2</a> 
 
    <a href="" class="item-number">3</a> 
 
    <div class="progress-selected"></div> 
 
</div>

您應該使用setInterval不setTimeout。瞭解更多here

來源

2014-10-20 14:16:11

這似乎不適用於我。 – tett 2014-10-20 14:32:55

某事像，也許這簡單的間隔功能？

i = $('.item-number').length; 
y = 0; 
setInterval(function(){ 
if(y >= i) { y = 0 } 
$('.item-number')[y].click(); 
y++; 

},3000);

來源

2014-10-20 14:17:36

如何讓滑塊在數秒後滑動？

回答

相關問題