Question

JQuery的：

$(".slidelink").click(function() {
    var vSLinkID = $(this).attr("id");
    $(".slidelinkimg").css("display", "none");
    $(".slidecontent").css("display", "none");
    console.log(vSLinkID);
    $("#slide"+vSLinkID.slice(-2)).fadeIn("slow");
    $("#slidelinkimg"+vSLinkID.slice(-2)).fadeIn("slow");
});

每次点击slidelink的DIV时，上面的Jquery都会触发，它会显示相应的DIV和图像。

我怎么能有一个执行点击功能的功能，除了它从第一张幻灯片到第n张幻灯片循环再回到第一张幻灯片，依此类推，直到我点击一张幻灯片。当我点击幻灯片时，它应显示幻灯片，然后从下一张幻灯片继续循环。

Answer 1

首先，您希望获得可以点击的幻灯片的参考。我建议为每个可点击的幻灯片添加一个类，例如＆＃34; slide＆＃34;。然后querySelect all all返回一个数组

var slides = document.querySelectorAll(".slide"),
// create a counter variable
counter = 0;

接下来，您需要创建一个interval或setTimeout函数喜欢这个

var interval = setInterval(function(){
     // code executes here 
     // check if counter is larger than the array of slides 
     // and reset it
     if(counter === slides.length){
        counter = 0;
     }
     // emulate click event on slide
     slides[counter].click();
     counter++;// increase counter so it can click another slide
}, 1000);// 1000 being 1 second delay or interval

禁用间隔（完全清除）使用

clearInterval(interval);// takes an interval created as a parameter

如何模拟点击事件以延迟浏览幻灯片

1 个答案: