滑块向左移动一定量时触发警报 [英] Trigger Alert When Slider Moves Left A Certain Amount

问题描述

所以，我实际上要用一块石头杀死两只鸟.首先，我试图在滑块向左移动到特定程度后触发警报.例如，假设它转到了我希望它触发警报的第三张幻灯片.另外，我需要有关滑块循环的帮助.我希望滑块像旋转一样旋转(360)，但是相反，在循环结束时，它一直滑回起点.查看Codepen，以更好地理解我的意思.感谢您的时间.非常感谢您的帮助.

So, I am going to actually kill two birds with one stone. First off, I am trying to trigger an alert once the slider moves left to a specific degree. For example, once it goes to, let’s say, the 3rd slide I would like for it to trigger an alert. Also, I need help with the cycling of the slider. I want the slider to cycle like a rotation (360), but instead at the end of the cycle it slides all the way back to the start. View the Codepen to have a better understanding of what I mean. Thank you for your time. Your help is much appreciated.

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

推荐答案

这使用animate函数中的可选回调参数完成了您想要的所有事情.它首先检查变量C(当前幻灯片的从0开始的索引)是否等于2(从1开始的索引中的3)，并显示警告.然后它检查C是否等于10(这表示当前显示的幻灯片是第9张幻灯片；第9张图片只是第1张幻灯片的副本).如果它在第9张幻灯片上，则跳回到第一个触发$("#right").click();.

This accomplishes both of the things that you wanted using the optional callback parameter in the animate function. It checks first to see if the variable C (the 0-based index of the current slide) is equal to 2 (3 in 1-based indexing), and shows an alert if it is. Then it checks to see if C is equal to 10 (which would mean that the slide currently being shown is the 9th one; The 9th image is just a duplicate of the 1st one) If it is on the 9th one, then jump back to the first one and trigger $("#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的布局对我来说很奇怪)

JSFiddle (Because CodePen's layout is weird to me)

这篇关于滑块向左移动一定量时触发警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！