需要幻灯片自动运行答案

【问题标题】：Need slideshow to run automatically需要幻灯片自动运行
【发布时间】：2016-07-12 19:27:38
【问题描述】：

大家好，

你能帮帮我吗？我有一张图片幻灯片（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 -->

【问题讨论】：

幻灯片的 javascript 在哪里？
互联网上有许多（免费）jQuery Carousels 实现。与其自己编写，不如尝试找到一个满足您需求的。 zurb.com/playground/orbit-jquery-image-slider这个例子。
我支持您编写自己的 Jquery 滑块代码这一事实。这样你就可以学到很多东西，并且对代码有更多的控制权......当然有很多用于轮播的 goog 实现，但也要注意有很多不必要的代码。

标签： javascript jquery html

【解决方案1】：

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

但是，正如其他人所建议的，您最好只使用数千个用于 jQuery 的幻灯片放映插件之一

【讨论】：

【解决方案2】：

您可以为此使用 setInterval() 函数。这将在每个指定时间间隔运行。

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

 },time_interval_in_milliseconds);

【讨论】：