如何使内容框自动滑动

Question

我有一个滑块，源代码在此URL here

中

除了一件事之外，所有方法都可以正常工作：如果我不单击下一步按钮，是否可以使幻灯片继续前进？

此刻，我必须单击以使其移至下一个。

正在运行的代码段

$(function() {

  var ul = $(".slider ul");
  var slide_count = ul.children().length;
  var slide_width_pc = 100.0 / slide_count;
  var slide_index = 0;

  var first_slide = ul.find("li:first-child");
  var last_slide = ul.find("li:last-child");

  last_slide.clone().prependTo(ul);

  first_slide.clone().appendTo(ul);

  ul.find("li").each(function(indx) {
    var left_percent = (slide_width_pc * indx) + "%";
    $(this).css({"left":left_percent});
    $(this).css({width:(100 / slide_count) + "%"});
  });

  ul.css("margin-left", "-100%");

  $(".slider .prev").click(function() {
    stopAutoslide()
    slide(slide_index - 1);
    startAutoslide()
  });

  $(".slider .next").click(function() {
    stopAutoslide()
    slide(slide_index + 1);
    startAutoslide()
  });
  
  var delay = 1200
  var interval
  
  function startAutoslide() {
    interval = setInterval(function() {
      slide(slide_index + 1)
    }, delay)
  }
  
  function stopAutoslide() {
    clearInterval(interval)
  }

  function slide(new_slide_index) {

    var margin_left_pc = (new_slide_index * (-100) - 100) + "%";

    ul.animate({"margin-left": margin_left_pc}, 400, function() {
      if(new_slide_index < 0) {
        ul.css("margin-left", ((slide_count) * (-100)) + "%");
        new_slide_index = slide_count - 1;
      }
      else if(new_slide_index >= slide_count) {
        ul.css("margin-left", "-100%");
        new_slide_index = 0;
      }
      slide_index = new_slide_index
    });
  }
  
  startAutoslide()
});

.slider {
  width: 100%;
  overflow: hidden;
  height: 550px;
  position: relative;
}
#main-navigation .container{
	max-width: 100%;
	width: 100%;
}
.slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  width: 300%;
  height: 100%;
  top: 0;
}

.slider li {
  padding: 0;
  margin: 0;
  width: 33.333333%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  border: none;
}

.slider li img {
  border: none;
  width: 100%;
  min-height: 100%;
}

.slider button {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: none;
  outline: none;
  top: 0;
  bottom: 0;
  width: 5%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  margin: 0;
  padding: 0;
  text-align:center;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.slider button.prev {
  left: 0;
}

.slider button.next {
  right: 0;
}

.slider button:hover, .slider button:active {
  opacity: 1.0;
}

.slider .content {
  z-index: 3;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 3em;
  padding: 0 1em;
  font-size: 1.5em;
}

.slider .content a {
  color: inherit;
}

.first{
	background: url('/images/thermometer.jpg');
	background-position: 50%;
	background-size: cover;
}

.second{
	background: url('/images/green-bottles.jpg');
	background-position: 50%;
	background-size: cover;
}
.third{
	background: url('/images/green-bottles.jpg');
	background-position: 50%;
	background-size: cover;
}

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><div class="containeeeer">
    <div class="slider">
        <ul>
            <li class="first flex">
                <div class="box-slider max-width flex align-center">
                <div>          <h2>Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.</p>
                <a href="#">Call to action</a>
                </div>

                </div>
            </li>
            <li class="second flex">

            </li>
            <li class="third flex">
            </li>
        </ul>
        <button class="prev"><</button>
        <button class="next">></button>
    </div>
</div>

希望有人可以提供帮助。

Answer 1

只需使用setTimeout()函数在一段时间后自动执行脚本：

var timeout = setTimeout(function() {
    slide(slide_index + 1); // or slide_index - 1 in case of sliding back
}, 1000) // delay in ms

请确保在手动单击按钮时用timeout清除clearTimeout(timeout)：）

有关setTimeout和setInterval的更多信息。