Javascript重複功能

最近我試着用Javascript和HTML設計滑塊。以下是我在HTML：Javascript重複功能

每張幻燈片是一個部門

<div id="sliderHolder"> 
<div id="slide1">Content For Slider1 </div> 
<div id="slide2">Content For Slider2 </div> 
<div id="slide3">Content For Slider3 </div> 
</div>

這裏是JS腳本：

function show_slider(){ 
document.getElementById('slide1').style.display="none"; 
document.getElementById('slide2').style.display="block"; 
document.getElementById('slide3').style.display="none"; 
} 
function show_slider2(){ 
document.getElementById('slide1').style.display="none"; 
document.getElementById('slide2').style.display="none"; 
document.getElementById('slide3').style.display="block"; 
} 
function show_slider3(){ 
document.getElementById('slide1').style.display="block"; 
document.getElementById('slide2').style.display="none"; 
document.getElementById('slide3').style.display="none"; 
} 
window.onload = function() { 
setTimeout(show_slider, 8000); 
setTimeout(show_slider2, 16000); 
setTimeout(show_slider3, 24000); 
}

我是新來的JavaScript。這適用於24秒1輪，並顯示每張幻燈片8秒，最後顯示第一張幻燈片。但我期待的是在完成一輪之後再次重複整個事情，這樣滑塊將會永遠持續下去。

你能幫我嗎？

多說：

我不知道如果我能寫的window.onload =函數（）另一個函數中。但我不喜歡的東西下面後功能show_slider3（）：

function repeat() { 
    window.onload = function() { 
    setTimeout(show_slider, 8000); 
    setTimeout(show_slider2, 16000); 
    setTimeout(show_slider3, 24000); 
     } 
}

和我說setTimeout(repeat, 25000);到window.onload = function()但它並沒有幫助我。

特別感謝;

來源

2014-11-23 tsepehr

您可以在加載時調用函數，然後在一個區間內再次運行該函數。

window.onload = loop(); 
function loop() { 
setTimeout(show_slider, 8000); 
setTimeout(show_slider2, 16000); 
setTimeout(show_slider3, 24000); 
setTimeout(loop, 24000); 
}

來源

2014-11-23 13:46:06 Logo

Easy And The Best。謝謝;） – tsepehr 2014-11-23 13:59:48

您應該使用函數window.setInterval來排隊一個函數，該函數將每8秒運行一次，例如。

var activeSlider = 0; 
var sliders = [ "slide1", "slide2", "slide3" ]; 
function showNextSlider() { 
    document.getElementById('slide1').style.display="none"; 
    document.getElementById('slide2').style.display="none"; 
    document.getElementById('slide3').style.display="none"; 
    var activeSliderName = sliders[ ++activeSlider % sliders.length ]; 
    document.getElementById(activeSliderName).style.display="block"; 
} 
window.setInterval(showNextSlider, 8000);

來源

2014-11-23 13:43:09

下面是簡單的代碼爲每個div沒有的功能要求，只是增加了類「滑」到每個DIV

<div id="sliderHolder"> 
    <div id="slider_1" class="slide">Content For Slider1 </div> 
    <div id="slider_2" class="slide" style="display:none;">Content For Slider2 </div> 
    <div id="slider_3" class="slide" style="display:none;">Content For Slider3 </div> 
</div>

這裏是javascript代碼（無jQuery的）

var s=1;// start div 
function show_slider() { 
    var cusid_ele = document.getElementsByClassName('slide');//getting all div by class name 
    console.log(s); 
    for (var i = 0; i < cusid_ele.length; ++i) { 
     var item = cusid_ele[i].style.display="none";// hiding all div of class "slide" 
    } 
    s++; 
    if(s>3)// if reach at last div, set it to first again 
     s = 1; 
    document.getElementById('slider_'+s).style.display="block";//showing next div 

} 
window.setInterval(show_slider, 1000);

here is jsfiddle demo

來源

2014-11-23 13:49:02 WisdmLabs

不錯的一個。謝謝 – tsepehr 2014-11-23 14:26:22

Javascript重複功能

回答

相關問題