0

我有这些“上一个”和“下一个”按钮，可以在我的网站上移动一些幻灯片。当您单击一个时，它会转到下一张或上一张幻灯片，并使用 css3 过渡属性进行动画处理，并更改滑动容器的左侧属性 += 或 -= 800px。

#sliding-container {
position: relative;
left: -1600px;

transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
}

.slide {
width: 800px; height: 500px;
background-color: white;

transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
}

这是js：_

    function slide(direction) {
            if (direction == 'prev') {
                    $("#sliding-container").css('left', '+=800px');

            }

            else if (direction == 'next') {
                    $("#sliding-container").css('left', '-=800px');

            }
        }

这个幻灯片函数被称为 onclick:_

        <div class="fade" id="fade1" onclick="slide('prev')"><</div>
        <div class="fade" id="fade2" onclick="slide('next')">></div>

问题

但问题是，如果您快速单击下一个或上一个按钮两次，它会搞砸，这就是为什么，我希望该功能在单击时不会再次运行，直到 2 秒过去（即，直到转换完成）​​。我怎样才能做到这一点？

4

2 回答 2

0

您可以在单击按钮时将诸如运行之类的变量设置为true。然后，您需要像这样绑定到动画结尾：

OBJECT.bind('animationend webkitAnimationEnd ',function(e){ running = false; });

这样你就不必玩延迟或超时，可以等待它告诉你它已经完成了。

然后在您单击时，您可以在决定运行动画之前检查它当前是否正在运行。

于 2013-04-10T16:06:12.177 回答
0

我使用了超时功能，在 Fernker 的帮助下，我想到了如何使用超时。

我在头部部分之前添加了这个，

    <script type="text/javascript">
    var running = false;
    </script>

我将此添加到幻灯片功能的顶部，

running = true;

和幻灯片功能底部的这一行

window.setTimeout(function() {running = false;}, 2000);

2000 年，因为那是过渡的时候。

我编辑了 onclick 部分

        <div class="fade" id="fade1" onclick="if (!running) { slide('prev'); }"><</div>
        <div class="fade" id="fade2" onclick="if (!running) { slide('next'); }">></div>

现在它起作用了！所以基本上这是 fernker 的建议，只是超时，因为绑定不起作用。

于 2013-04-10T17:07:47.210 回答