Question

最近我尝试使用Javascript和HTML设计一个滑块。这是我在HTML中的内容：

每张幻灯片都是一个部门

<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的新手。这工作1轮24秒，每张幻灯片显示8秒，最后显示第一张幻灯片。但我正在寻找的是在圆形完成后再次重复整个事情，这样滑块将永远持续下去。

你能帮助我吗??！

更多要说：

我不确定我是否可以在另一个函数中编写 window.onload = function（）。但我做了类似下面的事情功能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()，但它没有帮助我。

特别感谢;

Answer 1

您可以在加载时调用该函数，然后在一个间隔内再次运行该函数。

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

Answer 2

你应该使用函数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 );

Answer 3

这是一个简单的代码，不需要每个div的功能，只需添加类＆＃34; slide＆＃34;每个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是jsfiddle demo

Javascript重复功能

3 个答案: