Question

所以我似乎遇到了一些死胡同。我正在制作一个有图像滑块的页面。滑块有三个图像，一个在屏幕上居中，另外两个在左右两侧溢出。当您单击按钮以推进幻灯片时，它将运行此代码....

$('#slideRight').click(function() {
    if ($('.container').is(':animated')) {return false;}
    var next=parseInt($('.container img:last-of-type').attr('id')) + 1;
    if (next == 12) {
        next = 0;
    }
    var diff = galsize() - 700;
    if ($('.thumbs').css("left") == "0px") {
        var plus = 78;
    } else {
        var plus = 0;
    }
    var app='<img id="' + next + '" src="' + imgs[next].src + '">';
    $('.container').width('2800px').append(app);
    $('.container').animate({marginLeft: (diff + plus) + "px"}, 300, function() {
        $('.container img:first-of-type').remove();
        $('.container').width('2100px').css("margin-left", (galsize() + plus) + "px");
    });
}); // end right click

这个工作得很好，不是问题.....我也设置了一个间隔设置，每隔5秒自动运行一次以形成幻灯片......

var slideShow = setInterval(function() {
    $('#slideRight').trigger("click");
}, 5000);

这也很完美，不是问题....但是我的问题是这个....我有缩略图，当你点击缩略图时，它应该运行这段代码，直到当前图片与缩略图相同....这是代码......

$('img.thumbnail').click(function() {
    clearInterval(slideShow);
    var src = $(this).attr("src");
    while ($('.container img:eq(1)').attr('src') != src) {
        $('#slideRight').trigger("click");
    }
});

当我点击缩略图时没有任何反应......我已经使用警告语句来尝试和调试，最终发生的事情就是这个....

while循环执行，但第一次没有任何反应。幻灯片根本没有进展。从第二次执行开始，每次都会触发is（':: animated'）并且不执行slideRight事件的其余部分......

所以我的第一个问题，是否有人可以解释为什么它不会第一次运行？

我的第二个问题是，有没有办法等到动画完成后再继续循环？

任何帮助将不胜感激。谢谢！

Answer 1

我将从问题的第二部分开始，关于在继续循环之前完成动画。

我过去做过类似的事情，我所做的是设置两个全局变量来控制动画。一个变量是您想要的时间长度，另一个变量是自上一次循环以来多长时间的计数器。

所以，例如：

$timeToChange = 5; // in Seconds
$timeSinceReset = 0; // also in Seconds

将间隔设置为一秒并调用新函数（autoAdvance()）：

var slideShow = setInterval(function() {
    autoAdvance();
}, 1000); // only one second

然后每次调用间隔（每秒）时使用计数器变量进行计数。类似的东西：

function autoAdvance(){

    if($timeSinceReset == $timeToChange){

        $timeSinceReset = 0;

        $('#slideRight').trigger("click"); // execute click if satisfied
    }
    else{$timeSinceReset++;}

}

要停止循环直到动画完成，请在单击缩略图时将$timeSinceReset重置为0（零）。类似的东西：

$('#thumbnail').click(function(){
    $timeSinceReset = 0;
});

在循环继续之前，这将给你一个漂亮的5秒缓冲区（或你设置的任何内容$timeToChange）。

至于问题的第一部分，请抓取特定缩略图的编号，然后使用该编号滚动到相应的图像。类似的东西：

$('.thumb').click(function (each) {
    $childNumber = $(this).index();
});

你可以在this fiddle中看到。单击其中一个灰色框，它将告诉您单击了哪一个。使用该信息滚动到相应的图像（如果您只有三个图像，则为1,2或3）。

希望这有帮助。

Answer 2

以下是this fiddle的一种可行方式的完整解决方案。

<强> HTML：

顶部容器保存图像。在这个特定的例子中，我包括三个，使用div而不是图像。无论您使用图像还是div都不会改变任何内容。

<div class="holder_container">
    <div class="img_container">
        <div class="photo type1">ONE</div> 
        <div class="photo type2">TWO</div>
        <div class="photo type3">THREE</div>
    </div>
</div>

.img_container保存所有图像，宽度与图像宽度的总和相同。在这种情况下，每张图片（.photo）宽150像素，高50像素，因此.img_container宽450像素，高50像素。 .holder_container与单个图片的尺寸相同。运行时，.holder_container设置为在.img_container向左或向右移动其位置时隐藏任何溢出。

还包括两个导航按钮（前进和后退）

<div class="nav_buttons">
    <div class="nav back"><<<</div>
    <div class="nav forward">>>></div>
</div>

以及三个缩略图 - 顶部容器中每个图像一个

<div class="top">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
</div>

<强> CSS：

请参阅JS Fiddle获取所有CSS规则。

最重要的是：

.holder_container {
    margin: 0px;
    padding: 0px;
    height: 50px;
    width: 150px;
    position: relative;
    overflow: hidden;
}
.img_container {
    margin: 0px;
    padding: 0px;
    height: 50px;
    width: 450px;
    position: relative;
    left: 0px;
    top: 0px;
}

在示例中，.type1，.type2和.type3仅用于为图像div着色，以便您可以看到动画。可以将它们排除在您的代码之外。

<强> JavaScript的：

javascript包含以下元素......

变量：

var timeToChange = 3;   // period of the image change, in seconds
var timeSinceReset = 0; // how many seconds have passed since last image change
var currentImage = 1;   // Which image you are currently viewing
var totalImages = 3;    // How many images there are in total

功能：

autoAdvance - 通过setInterval每秒调用一次。计算自上次图像更改以来的秒数。如果已经过的秒数等于周期，则调用一个切换图像的函数。

function autoAdvance() {
    if (timeSinceReset == timeToChange) {
        timeSinceReset = 0;
        moveNext();
    } else {
        timeSinceReset++;
    }
}

moveNext（） - 移动到下一个图像。如果当前图像是最后一个（currentImage == totalImages），则currentImages将重新设置为1，并显示第一个图像。

function moveNext(){
    if(currentImage == totalImages){
        currentImage = 1;
        var newPos = 0 + 'px';      
        $('.img_container').animate({left: newPos}, 300);
    }else{
        currentImage++;
        var newPos = -((currentImage-1) * 150) + 'px'; // child numbers are zero-based  
        $('.img_container').animate({left: newPos}, 300);
    }
}

其余代码：

如果单击其中一个拇指，请移至相应的图像。

$('.thumb').click(function (each) {
    timeSinceReset = 0;
    var childNumber = $(this).index();
    currentImage = childNumber + 1; // child numbers are zero-based

    var newPos = -(childNumber * 150) + 'px'; // child numbers are zero-based   
    $('.img_container').animate({left: newPos}, 300);
});

如果单击其中一个导航按钮，则相应地移动。如果单击“返回”，则向后移动一个图像（如果当前在第一个图像上，则移动到最后一个图像）。如果单击“第一个”，则向前移动一个图像（如果当前在最后一个图像，则移动到第一个图像）。

$('.nav').click(function(){
    timeSinceReset = 0;
    if($(this).hasClass('back')){ // Back button
        if(currentImage == 1){
            currentImage = totalImages;
        }else{
            currentImage--;
        }
    }else{ // Forward button
        if(currentImage == totalImages){
            currentImage = 1;
        }else{
            currentImage++;
        }
    }

    var newPos = -((currentImage-1) * 150) + 'px';      
    $('.img_container').animate({left: newPos}, 300);

});

以下是小提琴示例中的link。

循环触发器（包含动画）不起作用

2 个答案: