Question

如何使幻灯片自动更改？可以找到该网站here

代码如下：

！[在此处输入图片描述] [2]

<div id="theme-main-banner" class="banner-one">
                <div data-src="images/home/slide-1.jpg">
                    <div class="camera_caption">
                        <div class="container">
                            <h1 class="wow fadeInUp animated">Digital Agency <br>And Your Bank <br> Loaner.</h1>
                            <p class="wow fadeInUp animated" data-wow-delay="0.2s">We have wide rang of loans section for our customer</p>
                            <a href="#" class="button-one wow fadeInLeft animated" data-wow-delay="0.3s">Apply for Loan</a>
                            <a href="service-v1.html" class="button-two wow fadeInRight animated" data-wow-delay="0.3s">See services</a>
                        </div> <!-- /.container -->
                    </div> <!-- /.camera_caption -->
                </div>
                <div data-src="images/home/slide-2.jpg">
                    <div class="camera_caption">
                        <div class="container">
                            <h1 class="wow fadeInUp animated">Digital Agency <br>And Your Bank <br> Loaner.</h1>
                            <p class="wow fadeInUp animated" data-wow-delay="0.2s">We have wide rang of loans section for our customer</p>
                            <a href="#" class="button-one wow fadeInLeft animated" data-wow-delay="0.3s">Apply for Loan</a>
                            <a href="service-v1.html" class="button-two wow fadeInRight animated" data-wow-delay="0.3s">See services</a>
                        </div> <!-- /.container -->
                    </div> <!-- /.camera_caption -->
                </div>
                <div data-src="images/home/slide-3.jpg">
                    <div class="camera_caption">
                        <div class="container">
                            <h1 class="wow fadeInUp animated">Digital Agency <br>And Your Bank <br> Loaner.</h1>
                            <p class="wow fadeInUp animated" data-wow-delay="0.2s">We have wide rang of loans section for our customer</p>
                            <a href="#" class="button-one wow fadeInLeft animated" data-wow-delay="0.3s">Apply for Loan</a>
                            <a href="service-v1.html" class="button-two wow fadeInRight animated" data-wow-delay="0.3s">See services</a>
                        </div> <!-- /.container -->
                    </div> <!-- /.camera_caption -->
                </div>
            </div> <!-- /#theme-main-banner -->

Answer 1

您可以使用setInterval使它们每隔一定时间显示隐藏，就像这样：

var slideEls = [document.querySelector('#slide-1'),
  document.querySelector('#slide-2'),
  document.querySelector('#slide-3')
];
document.querySelector('#slide-2').hidden = true;
document.querySelector('#slide-3').hidden = true;

var i = 0;
var id = window.setInterval(function() {
  if (slideEls[i].hidden) {
    slideEls[i - 1].hidden = true;
    slideEls[i].hidden = false;
  }
  i++;
  if (i >= slideEls.length) {
    window.clearInterval(id);
  }
}, 1000);

<div id="theme-main-banner" class="banner-one">
  <div id="slide-1" data-src="images/home/slide-1.jpg">
    <div class="camera_caption">
      <div class="container">
        <h1 class="wow fadeInUp animated">Digital Agency 1<br>And Your Bank <br> Loaner.</h1>
        <p class="wow fadeInUp animated" data-wow-delay="0.2s">We have wide rang of loans section for our customer</p>
        <a href="#" class="button-one wow fadeInLeft animated" data-wow-delay="0.3s">Apply for Loan</a>
        <a href="service-v1.html" class="button-two wow fadeInRight animated" data-wow-delay="0.3s">See services</a>
      </div>
      <!-- /.container -->
    </div>
    <!-- /.camera_caption -->
  </div>
  <div id="slide-2" data-src="images/home/slide-2.jpg">
    <div class="camera_caption">
      <div class="container">
        <h1 class="wow fadeInUp animated">Digital Agency 2<br>And Your Bank <br> Loaner.</h1>
        <p class="wow fadeInUp animated" data-wow-delay="0.2s">We have wide rang of loans section for our customer</p>
        <a href="#" class="button-one wow fadeInLeft animated" data-wow-delay="0.3s">Apply for Loan</a>
        <a href="service-v1.html" class="button-two wow fadeInRight animated" data-wow-delay="0.3s">See services</a>
      </div>
      <!-- /.container -->
    </div>
    <!-- /.camera_caption -->
  </div>
  <div id="slide-3" data-src="images/home/slide-3.jpg">
    <div class="camera_caption">
      <div class="container">
        <h1 class="wow fadeInUp animated">Digital Agency 3<br>And Your Bank <br> Loaner.</h1>
        <p class="wow fadeInUp animated" data-wow-delay="0.2s">We have wide rang of loans section for our customer</p>
        <a href="#" class="button-one wow fadeInLeft animated" data-wow-delay="0.3s">Apply for Loan</a>
        <a href="service-v1.html" class="button-two wow fadeInRight animated" data-wow-delay="0.3s">See services</a>
      </div>
      <!-- /.container -->
    </div>
    <!-- /.camera_caption -->
  </div>
</div>

Answer 2

您可以使用window.setInterval每X毫秒重复一个函数，并且可以在该函数中以编程方式单击camera_next div。

window.setInterval(function() {
  document.getElementsByClassName('camera_next')[0].click();
}, 10000); // 10 seconds

但是，这带来了一个问题。如果在用户单击camera_prev或camera_next div之后不久触发间隔，该怎么办？标语可以快速前进然后前进，或者分别前进两次，而您不希望那样。要解决此问题，每点击camera_prev和camera_next div，就需要清除然后重新创建间隔。

var myInterval;

function createInterval() {
  myInterval = window.setInterval(function() {
    document.getElementsByClassName('camera_next')[0].click();
  }, 10000); // 10 seconds
}
function resetInterval() {
  if (myInterval) window.clearTimeout(myInterval);
  createInterval();
}

createInterval();

document.getElementsByClassName('camera_prev')[0].addEventListener('click', resetInterval);
document.getElementsByClassName('camera_next')[0].addEventListener('click', resetInterval);

您可能已经为camera_prev和camera_next div设置了自己的点击事件监听器，因此您可以在其中调用resetInterval();。

如何使幻灯片自动更改而无需单击？

2 个答案: