Question

每个人都好，

你能帮我解决一下吗？我有一个图像幻灯片（3张图像），第一张图像显示在页面加载时。

我还有下一个和上一个按钮100％工作。但我只想让幻灯片在几秒钟（5秒）后自动移动到下一个图像并循环（返回到第一个图像并继续自动循环显示每个图像）。

我为看似晦涩难懂的类名道歉，因为它们已经大量实现到我正在使用的模板中。因此，更改它们也会创建CSS问题列表。

我的HTML

  <!-- START SLIDESHOW HOME -->
  <section id="slideshow-home" class="wrap noo-slideshow slideshow-home">
    <div class="property-slider">
      <div id="noo-slider-1" class="noo-slider noo-property-slide-wrap">
        <ul class="sliders">

          <li class="slide-item noo-property-slide">
            <img src="images/slideshow/bg-slide1.jpg" class="attachment-property-slider" alt="" />
            <div class="slide-caption">
              <div class="slide-caption-info">
                <h3><a href="property-details.html">Santa Monica, CA</a></h3>
              </div>
          </li>

          <li class="slide-item noo-property-slide">
            <img src="images/slideshow/bg-slide2.jpg" class="attachment-property-slider" alt="" />
            <div class="slide-caption">
              <div class="slide-caption-info">
                <h3><a href="property-details.html">Pacific Palisades, CA</a></h3>
              </div>
          </li>


          <li class="slide-item noo-property-slide">
            <img src="images/slideshow/bg-slide3.jpg" class="attachment-property-slider" alt="" />
            <div class="slide-caption">
              <div class="slide-caption-info">
                <h3><a href="property-details.html">Visalia, NJ 93277</a></h3>
            </div>
          </li>
        </ul>

        <div class="clearfix"></div>
        <div id="noo-slider-1-pagination" class="slider-indicators indicators-center-bottom"></div>
        <a id="noo-slider-1-prev" class="slider-control prev-btn" role="button" href="#">
          <span class="slider-icon-prev"></span>
        </a>
        <a id="noo-slider-1-next" class="slider-control next-btn" role="button" href="#">
          <span class="slider-icon-next"></span>
        </a>
      </div>
    </div>
  </section>
  <!-- END SLIDESHOW HOME -->

Answer 1

setInterval(function(){
   nextSlide(); // <-- your slide change code
}, 5000) // <-- run this every 5 seconds

但是，正如其他人所说的那样，只使用jQuery的数千个幻灯片插件中的一个可能会好得多

Answer 2

您可以使用setInterval（）函数。这将在指定时间的每个时间间隔内运行。

 setInterval(function(){
    // do what you want
    // or you can use: $('#noo-slider-1-next').click();

 },time_interval_in_milliseconds);

需要幻灯片自动运行

2 个答案: