Question

免责声明：我正在尝试学习javascript。我不是一个聪明的人。

所以，我制作了一个Jquery图像滑块。我很自豪。有用。它加载图像，并一个接一个地显示它们，日复一日。生活很美好。

然后我想向滑块添加导航，黑暗落在我的小王国上。

当我点击其中一个按钮时，我调用我的LoadSlide函数传递相应的索引LoadSlide(NewIndex)。然后它运行该函数，但它也继续运行带有标准LoadSlide(index+1)参数的函数。所以没有点击任何按钮就会这样运行：

slide1 -> (6500ms) -> slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 ...

然后我点击一个按钮（幻灯片2），另一个循环并行启动：

slide1 -> (6500ms) -> slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 ...
   [click] slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 -> (6500ms)...

请告诉我，传说的守护者。如果这条龙被杀，你将享受许多少女和无尽的麦芽酒。

可怜的代码在这里：http://jsfiddle.net/V6svT/2/

Answer 1

您遇到的问题是动画时间和点击分数之间的同步。当用户单击按钮时，您也不会取消下一个计划的操作。 supose我们在幻灯片2上意味着已经有一个计时器用于显示幻灯片3，当我点击按钮1时，第一个计时器将保持runig显示幻灯片3，另一个计时器将被创建以显示幻灯片1.我解决了这个问题拿着计时器并清除它。

另一个问题是，在你的adnimation：fadeIn回调你添加点击lisiner for button，我认为会添加许多列表器，所以当你点击两次时，你会有相同的listner连接两次，因此在trigered时调用两次。这是我的修正工作在我身边。可能还有其他问题。坚持点击和转换之间的时间。例如，如果你将fadeIn时间设置为setTimeout的同一时间，你将遇到同样的问题。

$(function () {
//edit
var timer='undefined';

var slides = new Array();
    slides[0] = 'http://i.imgur.com/UwRVo.png';
    slides[1] = 'http://i.imgur.com/wv08B.png';
    slides[2] = 'http://i.imgur.com/MlUbx.png'; 

   var max = $(slides).length;

var isBottom = false;

makeSlideBtns(max);

if(max>0) 
{
    LoadSlide(0,max);

}

function LoadSlide(index,max) {
     clearTimeout(timer);
     if(index<max)
        {
            var el0 = $("#slidebottom");
            var el1 = $("#slideover");
            var sbtn = $("#slidebtns li")[index];
            var img = new Image();
             $(sbtn).css('background-color', '#000'); 

            $(img).load(function () {
                $(this).css('display','none');
                if(isBottom == true)
                { 
                    $(el1).html(this);
                    $(el1).css('z-index', '3');
                    $(el0).css('z-index', '2');
                    console.log("el1 " + index);

                } else {
                    $(el0).html(this);
                    $(el1).css('z-index', '2');
                    $(el0).css('z-index', '3');
                    console.log("el0 " + index);

                }
                isBottom = !isBottom;

                function nextSlide () {                                                                      
                                LoadSlide(index+1,max);
                                console.log("sbtn: " + sbtn);
                                $(sbtn).css('background-color', '#fff');
                };

                $(this).fadeIn(2000,function() {
                        timer=setTimeout(nextSlide, 5000);     
                });


            }).error(function () {             
                LoadSlide(index+1,max);
            }).attr('src', slides[index]);  

        } else {
            LoadSlide(0,max)
        }
}

function makeSlideBtns (max) {

    for(i=0; i<max; i++) {
        var num = i + 1;
        $("#slidebtns").append('<li><a>' + num + '</a></li>');
    }
};

//add this in your loop will add more as you click
$("#slidebtns li").click(function () { 
     $("#slidebtns li").css('background-color', '#fff');                                               
     var i=$(this).index();             
      LoadSlide(i,max);
      return false;
  });

}）;

当我添加click事件时，我的javascript函数会重复运行（？）

1 个答案: