Question

我有一个WordPress网站，我为其创建了一个插件滑块。

我想在悬停时暂停setTimeout并在mouseout上恢复或重置它。

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

我想我应该使用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为当前幻灯片分配一个类是，您可以使用public class ChooseNumber1 extends AppCompatActivity { private ArrayAdapter<String> mobileNumberAdapter; private ArrayList<String> mobileNumbersList = new ArrayList<>(); private ListView mobileNumberListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_choose_number1); ... mobileNumberListView = (ListView) findViewById(R.id.listViewNumberList); mobileNumbersList = getIntent().getStringArrayListExtra("mobileNumbers"); if(mobileNumbersList != null) { mobileNumberAdapter = new ArrayAdapter<String>(this, R.layout.list_item_numbers, R.id.list_item_number_textview, mobileNumbersList); mobileNumberListView.setAdapter(mobileNumberAdapter); } } }：

＆＃13;

setInterval

＆＃13;

$(".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!

});

＆＃13;

*{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;}

＆＃13;

Offtopic :(作为一名用户界面设计师）我建议你使用＆＃34;更好的？＆＃34; 来制作动画的方式，这就是：
保留旧幻灯片，然后滑入新的幻灯片。
人眼更容易受到移动物体的吸引。新移动幻灯片为新的图库/幻灯片主题提供了更多的概念和介绍意义。

clearTimeout vs setInterval

1 个答案: