Javascript 滑块向左移动一定量时触发警报

所以，我打算一石二鸟。首先，当滑块向左移动到特定程度时，我尝试触发警报。例如，当它进入第三张幻灯片时，我希望它触发警报。另外，我需要帮助与滑块的循环。我希望滑块像360度旋转一样循环，但在循环结束时，它会一直滑回起点。查看代码笔以更好地理解我的意思。谢谢你抽出时间。非常感谢你的帮助

---

这将使用animate函数中的可选回调参数完成您想要的两件事情。它首先检查当前幻灯片基于0的索引中的变量C是否等于基于1的索引中的2 3，如果等于，则显示警报。然后检查C是否等于10，这意味着当前显示的幻灯片是第9张幻灯片；如果第9个图像位于第9个图像上，则第9个图像只是第一个图像的副本，然后跳回第一个图像并触发$right。单击

---

因为CodePen的布局对我来说很奇怪

完全公开：已经很晚了，我不确定我是否完全理解你的代码。这样一来，你就不能在画廊的末尾复制第一幅图像，然后不复制就可以了。当最后一幅图像的幻灯片动画完成后，就可以对第一幅图像进行动画制作了吗？基本上，代码的工作原理是，滑块确实在每隔一段时间向左移动。通过使用浏览器inspect元素可以看到这一点。至于你建议的复制和抓拍过程，我不确定我是否完全理解。也许你明天可以再解释一下，在白天？但是谢谢你的回复。我将不自信地进一步研究它。我得到了你想要的两件事，并在下面发布了我的代码。如果您有任何问题等，请随时添加评论，我会在早上查看。嘿，如果您不介意，请您再帮我做一件事。我正在尝试自动启动滑块，但由于某些原因，我的方法不起作用？谢谢。请尝试添加$document.readyfunction{$btn.click；}；到代码的底部。这将在加载文档后立即触发“开始”按钮的单击功能。您可以使用CSS显示隐藏按钮：无；，如果你愿意的话，它应该仍能正常工作。哇，这太棒了！非常感谢。你帮了大忙。我一定会和你保持联系。再次感谢！我不想再打扰你，但我还有最后一个问题。这都是一个学习的过程。如果您看到我的滑块，您会注意到当鼠标进入滑块时，滑块会暂停。当鼠标离开滑块时，滑块再次启动。现在，我想在用户通过单击停止按钮停止滑块时禁用此功能。然后，当用户通过“开始”按钮启动滑块时，此鼠标输入功能将再次启用。由于某些原因，自动启动不起作用，因此P.s I已修复，但自动启动功能在JSFIDLE中仍然不起作用。这正在起作用：。单击“开始”按钮时，将变量S设置为0；单击“停止”按钮时，将变量S设置为1。当鼠标进入或离开时，除了检查事件类型外，脚本现在还检查S是否为false。如果S为true，则单击了停止按钮，滑块不应再次启动。单击开始按钮时，悬停功能正常工作。$'slider'.hoverfunctione{return e.type='mouseleave'&&S！=1？setResetIntervaltrue:setResetIntervalfalse；}；

var W = $('#image_rotator').width(),
N = $('#slider .slide').length,
C = 0,
intv;

if (N <= 1) $('#left, #right').hide();
$('#slider').width(W * N);

$('#left, #right').click(function() {
C = (this.id == 'right' ? ++C : --C) < 0 ? N - 1 : C % N;
$('#slider').stop().animate({
left: -C * W
}, 300);
});

function setResetInterval(e) {

var intv = $("#slider");
if (e) {
timer = setInterval(function() {
$('#right').click();
}, 1000);
} else {
clearInterval(timer);
}

$('#slider').click(function() {
var x = $('#slider').offset();
alert("Top: " + x.top + " Left: " + x.left);
});
}

$("#btn").click(function(e) {
e.preventDefault();
setResetInterval(true);
});
$("#btn2").click(function(e) {
e.preventDefault();
setResetInterval(false);
});
$('#slider').hover(function(e) {
return e.type == 'mouseenter' ? setResetInterval(false) : setResetInterval(true);
});

$('#left, #right').click(function() {
    C = (this.id == 'right' ? ++C : --C) < 0 ? N - 1 : C % N;
    $('#slider').stop().animate({
        left: -C * W
    }, 300, function() {
        if (C == 2){alert("3rd");}
        if (C == 10) {
            $('#slider').css("left", "0");
            $('#right').click();
        }
    });
});