Question

你一直都是一个很好的帮助，所以我毫不怀疑你能够毫无疑问地解决这个问题！

基本上我所拥有的是一个在三个div之间切换的旋转木马，＃Item1，＃Item2，＃Item3。我也有三个按钮（btn1，btn2，btn3）。目的是旋转木马像往常一样滚动，但当你点击一个按钮时，它会跳回到那个位置并从那里继续。

目前，旋转木马在点击按钮时会跳回到正确的div，但它会转到应该的位置。我确定我错过了一些简单的东西！

此外，当鼠标位于鼠标上方时，是否有暂停此功能的方法？

我把以下jQuery放在一起，你能不能告诉我哪里出错了？;

$(function() {


  $('#Item1').fadeIn(1000);

  var timer = setInterval( whichDiv, 6000);

  var counter = 2;

  function whichDiv() {
    if (counter == 0) { counter++; return; }
    else if (counter == 1){
        $('#Item1').addClass('Maxyactive');
        $('#Item2').removeClass('Maxyactive');
        $('#Item3').removeClass('Maxyactive');      
        $('#Item1').fadeIn(1000);
        $('#Item2').hide();
        $('#Item3').hide();
        counter++;
    }
    else if (counter == 2){
        $('#Item1').removeClass('Maxyactive');
        $('#Item2').addClass('Maxyactive');
        $('#Item3').removeClass('Maxyactive');      
        $('#Item1').hide();
        $('#Item2').fadeIn(1000);
        $('#Item3').hide();   
        counter++;
    }
    else if (counter == 3){
        $('#Item1').removeClass('Maxyactive');
        $('#Item2').removeClass('Maxyactive');
        $('#Item3').addClass('Maxyactive');      
        $('#Item1').hide();
        $('#Item2').hide();
        $('#Item3').fadeIn(1000);      
        counter = 1;
    }



  }





$(".btn1").click(function ShowFirst() {

    $('#Item1').addClass('Maxyactive');
    $('#Item2').removeClass('Maxyactive');
    $('#Item3').removeClass('Maxyactive');      
    $('#Item1').fadeIn(1000);
    $('#Item2').hide();
    $('#Item3').hide();
    counter == 2;
}); 



$(".btn2").click(function ShowSecond() {

    $('#Item1').removeClass('Maxyactive');
    $('#Item2').addClass('Maxyactive');
    $('#Item3').removeClass('Maxyactive');      
    $('#Item1').hide();
    $('#Item2').fadeIn(1000);
    $('#Item3').hide();   
    counter == 3;

}); 



$(".btn3").click(function ShowThird() {

    $('#Item1').removeClass('Maxyactive');
    $('#Item2').removeClass('Maxyactive');
    $('#Item3').addClass('Maxyactive');      
    $('#Item1').hide();
    $('#Item2').hide();
    $('#Item3').fadeIn(1000);   
    counter == 1;

}); 

});

Answer 1

在按钮单击事件中，您尝试使用==为计数器分配值，但这只是进行比较，可能需要'counter = 1;'等？

要暂停，您可以尝试将滑块上的鼠标输入/离开事件绑定到clearInterval（计时器）;并重新创建它。

旋转木马中三个div之间的淡入淡出，可选择不工作

1 个答案: