javascript - 清除超时与设置间隔

Question

我有一个 WordPress 网站，我为其制作了插件 slider 。

我想在悬停时暂停 setTimeout 并在鼠标移开时恢复或重置它。

我的代码变得有点困惑，因为我一直在添加东西。

我认为我应该使用 setInterval 方法，但我不确定。

该网站位于**

这是我的 .js 文件:

$(document).ready(function(){
addActive();
})

function addActive(){


$time = constants.transition;
$delay = constants.delay+'000';
$control = constants.control;
var $change = $($control);

console.log($time);
console.log($delay);
console.log($control);

var $slider = $('.slider-plus');
var $value1 = $slider.find('li:nth-child(1) .sas-values').html();   
$('.slider-plus li:nth-child(1)').addClass('active').css({'z-index':'1','opacity':'1'});
$change.html($value1);
setTimeout(translate1, $delay);


function translate1(){
    var $change = $($control);
    var $value2 = $slider.find('li:nth-child(2) .sas-values').html();
    $slider.find('li:nth-child(3)').removeClass('translate');
    $slider.find('li:nth-child(1)').removeClass('active').addClass('translate').animate({'z-index':'0','opacity':'0'},$time);
    $slider.find('li:nth-child(2)').addClass('active').animate({'z-index':'1','opacity':'1'},$time);
    $change.html($value2);
    if ($slider.find('li:nth-child(2)').hasClass('active')) {   
        $slider.hover(function(){
            clearTimeout($(this).data('timeout'));
        }, function(){
            setTimeout(translate2, $delay);
        });
    }
}

function translate2(){
    var $change = $($control);
    var $value3 = $slider.find('li:nth-child(3) .sas-values').html();
    $slider.find('li:nth-child(1)').removeClass('translate');
    $slider.find('li:nth-child(2)').removeClass('active').addClass('translate').animate({'z-index':'0','opacity':'0'},$time);
    $slider.find('li:nth-child(3)').addClass('active').animate({'z-index':'1','opacity':'1'},$time);
    $change.html($value3);
    setTimeout(translate3, $delay);
}

function translate3(){
    var $change = $($control);
    var $value3 = $slider.find('li:nth-child(3) .sas-values').html();
    $slider.find('li:nth-child(2)').removeClass('translate');
    $slider.find('li:nth-child(3)').removeClass('active').addClass('translate').animate({'z-index':'0','opacity':'0'},$time);
    $slider.find('li:nth-child(1)').addClass('active').animate({'z-index':'1','opacity':'1'},$time);
    $change.html($value1);
    setTimeout(translate1, $delay);
}

}

感谢您的帮助，马特

Answer 1

使用DRY概念，让JS为你计算幻灯片的数量。
此外，您还可以使用 CSS3 流畅地制作动画。
您所需要的只是使用 JS 为当前幻灯片分配一个类。
是的，您可以使用setInterval:

$(".slider").each(function() {

  var $cont = $(".cont", this), // Get DIV for content
      $li   = $("li", this),    // Get slides
      tot   = $li.length,       // How many slides?
      itv   = null,             // setInterval variable
      c     = 0                 // Dummy incremental counter


  function anim() {
    var $liC = $li.removeClass("show").eq(c).addClass("show");
    $cont.html($liC.find(".to-cont").html());
    c = ++c % tot; // Increment and loop counter
  }

  function stop() {
    clearInterval( itv );
  }

  function play() {
    itv = setInterval(anim, 3000);
  }

  $(this).hover(stop, play);    // Pause on hover
  
  anim();                       // Animate first slide in!
  play();                       // Start loop!

});

*{margin:0;box-sizing:border-box;}

.slider{
  position:relative;
  height:50vh;
}
.slider .cont{
  position:relative;
  background:#eee;
  width:33.333%;  height:100%; 
  padding:24px 16px;
}
.slider ul{
  position:absolute;
  overflow:hidden;
  right:0;  top:0;
  width:66.666%;  height:100%;
  padding:0;  list-style:none;
}
.slider ul li{
  position:absolute;
  width:100%;  height:100%;
  background:50%;  background-size:cover;
  
  transition: transform 1s, opacity 1s;
  opacity:0;
  transform:translateX(-100%);
}
.slider ul li.show{
  transition: transform 0s, opacity 1s;
  opacity:1;
  transform:translateX(   0%);
}
.slider ul li div{
  position:absolute;
  right:0;  bottom:0;
  padding:16px;
  background:rgba(255,255,255,0.5)
}
.slider ul li .to-cont{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- YOU CAN USE UNLIMITED .SLIDER -->
<div class="slider">

  <div class="cont"></div>

  <ul>
    <li style="background-image:url(http://placehold.it/800x400/0bf);">
      <div>This is slide 1</div>
      <div class="to-cont"><h2>Slide 1</h2> 1orem ipsum...</div>
    </li>
    <li style="background-image:url(http://placehold.it/800x400/fb0);">
      <div>This is some slide 2</div>
      <div class="to-cont"><h2>Slide 2</h2> 2orem ipsum...</div>
    </li>
    <li style="background-image:url(http://placehold.it/800x400/bf0);">
      <div>Slide 3</div>
      <div class="to-cont"><h2>Slide 3</h2> 3orem ipsum...</div>
    </li>
    <!-- AS MANY LI AS YOU WANT -->
  </ul>

</div>

Offtopic:(作为 UI 设计师)我建议您采用一种“更好？”的方式来为这些内容制作动画，那就是:
保留旧幻灯片，然后滑入新幻灯片。
人眼更容易被移动的物体所吸引。 新移动幻灯片对新画廊/幻灯片主题更具概念性和介绍性意义。