Question

每个div呼叫H4我都有5个div。我通过javascript创建了此代码以获取结果，并且可以正常工作，但现在我需要它自动按顺序自动执行此操作，而无需用户交互，就像自动滑块一样，例如，caption1应该先单击并在8秒钟后显示caption1content，而caption 2单击并显示captoin2content等如何通过javascript做到这一点。

JS：

$("#caption1").on('click', function() {
               $("#caption1content").fadeIn();
               $("#caption2content,#caption3content,#caption4content,#caption5content").fadeOut();
            });
            $("#caption2").on('click', function() {
               $("#caption2content").fadeIn();
               $("#caption1content,#caption3content,#caption4content,#caption5content").fadeOut();
            });
            $("#caption3").on('click', function() {
               $("#caption3content").fadeIn();
               $("#caption1content,#caption2content,#caption4content,#caption5content").fadeOut();
            });
            $("#caption4").on('click', function() {
               $("#caption4content").fadeIn();
               $("#caption1content,#caption2content,#caption3content,#caption5content").fadeOut();
            });
            $("#caption5").on('click', function() {
               $("#caption5content").fadeIn();
               $("#caption1content,#caption2content,#caption3content,#caption4content").fadeOut();
            });

HTML：

<div id="caption">
    <h4 id="caption1content" class="ccntnt">text1</h4>
    <h4 id="caption2content" class="ccntnt">text2</h4>
    <h4 id="caption3content" class="ccntnt">text3</h4>
    <h4 id="caption4content" class="ccntnt">text4</h4>
    <h4 id="caption5content" class="ccntnt">text5</h4>
</div>
<div id="captionbtns">
    <div id="caption1">text1</div>
    <div id="caption2">text2</div>
    <div id="caption3">text3</div>
    <div id="caption4">text4</div>
    <div id="caption5">text5</div>
</div>

Answer 1

很简单，您可以使用setInterval，并且可以像这样操作，但不是完美的方法。

每8秒就会单击一次，只会循环一次，如果要一次又一次地运行它，可以使用if条件重置计数；

let count = 1;

setInterval(function(){

  $(`#caption${count}`).click();
  count++;
},8000);

每x秒模拟一次无用户互动的点击

1 个答案: