如何设置计时器以转到列表中的下一个项目？

Question

我想让它每隔 5 秒自动出现下一张幻灯片。我也想这样做，以便单击 next/prev 将重置计时器。我如何实现这一目标？到目前为止我有这个：https://jsfiddle.net/5yL8a1av/4/

jQuery:

$(document).ready(function () {
$(".divs > div").each(function (e) {
    if (e != 0) $(this).hide();
});

$("#next").click(function () {
    if ($(".divs > div:visible").next().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).next().fadeIn(1000)
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:first").fadeIn(1000);
        });
    }
    return false;
});

$("#prev").click(function () {
    if ($(".divs > div:visible").prev().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).prev().fadeIn(1000);            
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:last").fadeIn(1000);
        });

    }
    return false;
});
});

Answer 1

利用clearTimer和全局变量

设置一个全局变量来存储您的计时器，当页面加载或 next/prev 被激活时，再次设置计时器。您可以将 setTimeout 命令包装到一个函数中并调用它。

$(document).ready(function () {

    var autoTimer;

    // set auto timer
    autoTimer = setTimeout(function(){
        goNext();
    }, 5000);

    $(".divs > div").each(function (e) {
        if (e != 0) $(this).hide();
    });

    function goNext() {
        if ($(".divs > div:visible").next().length != 0) {
            $(".divs > div:visible").fadeOut(1000, function(){
                $(this).next().fadeIn(1000)
            });
        } else {
            $(".divs > div:visible").fadeOut(1000, function () {
                $(".divs > div:first").fadeIn(1000);
            });
        }
        // clear timer
        clearTimeout(autoTimer);

        // set auto timer
        autoTimer = setTimeout(function(){
            goNext();
        }, 5000);
        return false;
    }

    $("#next").click(function () {
        return goNext();
    });

    $("#prev").click(function () {
        if ($(".divs > div:visible").prev().length != 0) {
            $(".divs > div:visible").fadeOut(1000, function(){
                $(this).prev().fadeIn(1000);            
            });
        } else {
            $(".divs > div:visible").fadeOut(1000, function () {
                $(".divs > div:last").fadeIn(1000);
            });

        }

         // clear timer
        clearTimeout(autoTimer);

        // set auto timer
        autoTimer = setTimeout(function(){
            goNext();
        }, 5000);
        return false;
    });
});

Answer 2

操作方法如下：

Demo

var showNext = function() {
  if ($(".divs > div:visible").next().length != 0) {
    $(".divs > div:visible").fadeOut(1000, function() {
      $(this).next().fadeIn(1000)
    });
  } else {
    $(".divs > div:visible").fadeOut(1000, function() {
      $(".divs > div:first").fadeIn(1000);
    });
  }
};
var showPrev = function() {
  if ($(".divs > div:visible").prev().length != 0) {
    $(".divs > div:visible").fadeOut(1000, function() {
      $(this).prev().fadeIn(1000);
    });
  } else {
    $(".divs > div:visible").fadeOut(1000, function() {
      $(".divs > div:last").fadeIn(1000);
    });

  }
};

$(document).ready(function() {
  $(".divs > div").each(function(e) {
    if (e != 0) $(this).hide();
  });

  $("#next").click(function() {
    showNext();
    return false;
  });

  $("#prev").click(function() {
    showPrev();
    return false;
  });

  var interval = setInterval(function() {
    showNext();
  }, 1000);
  $('#next, #prev').one('click', function() {
    clearInterval(interval);
  });
});

#one {
  background: red;
  height: 200px;
  width: 200px;
}
#two {
  background: blue;
  height: 200px;
  width: 200px;
}
#three {
  background: green;
  height: 200px;
  width: 200px;
}
#prev {
  background: gray;
  height: 50px;
  width: 50px;
}
#next {
  background: orange;
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="divs">
  <div id="one">
    <div class="content-b">
      <h1>KEYS TO SUCCESS</h1>

      <h3>Digial Design Intern</h3>
      <a href="#">
        <div id="c">LEARN MORE</div>
      </a>

    </div>
  </div>
  <div id="two">
    <div class="content-b">
      <h1>KEYS TO FAILURE</h1>

      <h3>Digial Design Intern</h3>
      <a href="#">
        <div id="c">LEARN LESS</div>
      </a>

    </div>
  </div>
  <div id="three">
    <div class="content-b">
      <h1>KEYS TO FAILURE</h1>

      <h3>Digial Design Intern</h3>
      <a href="#">
        <div id="c">LEARN LESS</div>
      </a>

    </div>
  </div>
</div>
<div id="prev">Prev</div>
<div id="next">Next</div>

Answer 3

将您的下一个按钮代码包装在递归 setTimeout 函数中。

(function loopsiloop(){
       setTimeout(function(){        
      if ($(".divs > div:visible").next().length != 0) {
            $(".divs > div:visible").fadeOut(1000, function(){
                $(this).next().fadeIn(1000)
            });
        } else {
            $(".divs > div:visible").fadeOut(1000, function () {
                $(".divs > div:first").fadeIn(1000);
            });
        }
           loopsiloop();      
       }, 5000);
    })();

Working jsfiddle

Answer 4

你为什么不试试 bx 滑块？..这是一个 link http://bxslider.com/

如何设置计时器以转到列表中的下一个项目？

How to set a timer to go to the next item in the list?

jquery

timer