gpt4 book ai didi

javascript - slider 在多次单击时忽略 If Conditional

转载 作者:太空宇宙 更新时间:2023-11-04 12:58:36 25 4
gpt4 key购买 nike

我有 jQuery slider ,它通过将左侧属性设置为 1400 像素的动画,每 5 秒在容器 div 中滑动元素。一旦 left 属性达到 -2800px,if 条件开始重置 left 属性,同时从行的前面删除元素并将它们附加到列表的后面,以便滑动循环无限继续。此 slider 还具有左右按钮,允许用户根据需要循环浏览图像。

我遇到的问题是,如果您快速连续多次单击 slider ,那么 left 属性会超出 if 条件中设置的 -2800px 边界。我假设这是因为在左侧属性达到 -2800px 之前,多次点击事件都被触发了。我怎样才能阻止这种情况发生?是否有一个函数可以在第一个函数完成之前停止多个函数的触发?这是一个 jsFiddle(为了显示我改变了宽度):

http://jsfiddle.net/25tt5vmp/

我的 jQuery:

$(document).ready(function () {


var myTimer = setInterval(slide, 5000);

function slide() {

var left = $('#sliderList').css('left');
left = left.substring(0, left.length - 2);
if (left <= -2800) {


$('#sliderList').css('left', '-1400px');
var slide = $('#sliderList li:first');
$('#sliderList').children('li:first').remove();
$('#sliderList').append(slide);
$('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");

}
else {
$('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
}
}

$('#sliderLeft').click(function () {
var left = $('#sliderList').css('left');
left = left.substring(0, left.length - 2);
if (left <= -2800) {


$('#sliderList').css('left', '-1400px');
var slide = $('#sliderList li:first');
$('#sliderList').children('li:first').remove();
$('#sliderList').append(slide);
$('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);
}
else {
$('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);
}
});

$('#sliderRight').click(function () {
var left = $('#sliderList').css('left');
left = left.substring(0, left.length - 2);
if (left >= 0) {


$('#sliderList').css('left', '-1400px');
var slide = $('#sliderList li:last');
$('#sliderList').children('li:last').remove();
$('#sliderList').prepend(slide);
$('#sliderList').animate({ left: "+=1400px" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);

}
else {
$('#sliderList').animate({ left: "+=1400" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);
}
});

});

最佳答案

有一个简单的解决方案。使用阻塞变量。生成一个变量:

var blockedSlider = false;

然后,在启动动画时将其设置为 true。每次点击时,您都会检查 blockedSlider 是 true 还是 false,只有在 false 时才触发动画。
动画完成后,再次将 blockedSlider 设置为 false。就是这样。

关于javascript - slider 在多次单击时忽略 If Conditional,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25623060/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com