Javascript 滑块在多次单击时忽略条件
我有一个jQuery滑块,它通过将left属性设置为1400px的动画,每5秒在容器div中滑动项目。当left属性达到-2800px时,if条件开始重置left属性,同时从行的前面移除项并将它们追加到列表的后面,这样滑动循环将无限继续。此滑块还具有左键和右键,允许用户根据需要循环浏览图像 我遇到的问题是,如果快速连续多次单击滑块,那么left属性将超出if条件中设置的-2800px边界。我假设这是因为在left属性到达-2800px之前,多次单击事件都被触发了。我怎样才能阻止这种事情发生?是否有一个功能可以在第一个功能完成之前阻止多个功能启动?下面是一个JSFIDLE(为了显示,我更改了宽度): 我的jQuery:Javascript 滑块在多次单击时忽略条件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个jQuery滑块,它通过将left属性设置为1400px的动画,每5秒在容器div中滑动项目。当left属性达到-2800px时,if条件开始重置left属性,同时从行的前面移除项并将它们追加到列表的后面,这样滑动循环将无限继续。此滑块还具有左键和右键,允许用户根据需要循环浏览图像 我遇到的问题是,如果快速连续多次单击滑块,那么left属性将超出if条件中设置的-2800px边界。我假设这是因为在left属性到达-2800px之前,多次单击事件都被触发了。我怎样才能阻止这种事情发生?是否
$(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);
}
});
});
$(文档).ready(函数(){
var myTimer=设置间隔(幻灯片,5000);
函数幻灯片(){
var left=$('#sliderList').css('left');
左=左。子字符串(0,左。长度-2);
如果(左有一个简单的解决方案。使用阻塞变量。生成变量:
var blockedSlider = false;
然后,在启动动画时将其设置为true。
每次单击时,您都会检查blockedSlider是否为true或false,如果为false,则仅触发动画。
动画完成后,再次将blockedSlider设置为false。就是这样。问题是,您确实使用了setInterval。但是setInterval函数setInterval(function(){alert(“Hello”)},3000中没有的任何内容
立即被触发,而不是在间隔完成后。将blocked=true移动到其中!Sry,我不太确定您正在使用setInterval做什么。这应该是“等待动画完成”吗或者它的用途是什么?稍后我将查看您的功能。我正在尝试的是使用一个滑块,它将每5秒滑动到下一个图像。此外,用户应该能够使用按钮滑动图像。问题是,如果用户单击按钮的次数太多,滑块将很快从页面上滑出。您需要单击功能中已运行的动画的ck。