javascript - 有没有办法将滑块重置为图像 1？

Question

我正在尝试创建一个可以在悬停时使用的滑块，但是我想添加一件事是重置。例如，如果访客悬停在幻灯片上并且他在第 4 张图像上，那么当他悬停并再次悬停在其上时，幻灯片应该从图像 1 开始，而不是从图像 4 开始。请帮助！

这是代码。

jQuery(function($) {
      $('.slides').cycle({
        fx: 'none',
        speed: 4000,
        timeout: 70,
      }).cycle("pause");

      $('.slideshow-block').hover(function() {
        $(this).find('.slides').addClass('active').cycle('resume');
      }, function() {
        $(this).find('.slides').removeClass('active').cycle('pause');
      });

* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}

.slideshow-block {
  position: relative;
  width: 1150px;
  height: 530px;
  overflow: hidden;
  background: url('img/3-1.png');
}

.slides {
  z-index: 0;
  visibility: hidden;
}

.slides.active {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

  <div class="slideshow-block">
    <ul class="slides">
      <li><img src="img/3-1.png" /></li>
      <li><img src="img/3-2.png" /></li>
      <li><img src="img/3-3.png" /></li>
      <li><img src="img/3-4.png" /></li>
      <li><img src="img/3-5.png" /></li>
      <li><img src="img/3-6.png" /></li>
    </ul>
  </div>

标签： javascriptjqueryhtmlcss

Answer 1

这可能会帮助您：

$('.slideshow-block').hover(function(){
     setTimeout(function () {
         $('.slides').cycle(0);
     }, 100);
     $(this).find('.slides').addClass('active').cycle('resume');

 }, function(){
     $(this).find('.slides').removeClass('active').cycle('pause');

 });