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

Question

所以，我真的要一箭双雕。首先，我试图在滑块向左移动到特定程度后触发警报。例如，一旦转到第 3 张幻灯片，我希望它触发警报。另外，我需要有关滑块循环的帮助。我希望滑块像旋转一样循环 (360)，但在循环结束时它会一直滑回起点。查看 Codepen 以更好地理解我的意思。感谢您的时间。非常感谢您的帮助。

Live Codepen

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);
});

Answer 1

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

$('#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();
        }
    });
});

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

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

Trigger Alert When Slider Moves Left A Certain Amount

javascript

jquery

slider

alert

setinterval