Javascript Jquery滑块修复

我制作了一个滑块（），问题出在右边的按钮上。当你点击它时，它只播放#slide2和#slide3。还有一件事，如果你对我如何重置有什么建议的话。我的意思是，在幻灯片3之后应该播放幻灯片1。JS代码：

$('.move-slide').click(function() {
        var hiding_image = {  "direction" : "right",  "mode" : "hide"};
        var showing_image = { "direction" : "left", "mode" : "show"};
        var direction = "right";
        // $(this) == current element you clicked
        if($(this).hasClass('glyphicon-chevron-left')) {
            direction = 'left';
            hiding_image = {  "direction" : "left",  "mode" : "hide"};
            showing_image = { "direction" : "right", "mode" : "show"};
        }
           var current_element = $(".slide.active");
 if(direction == 'right' && current_element.next(".slide").length > 0) {
        current_element.next(".slide")
            .effect( "slide", showing_image, 1000)
            .addClass('active')
            .removeClass('inactive');
        current_element.effect( "slide", hiding_image, 1000)
            .removeClass('active');
    } else if(current_element.prev(".slide").length > 0) {
        current_element.prev(".slide")
            .effect( "slide", showing_image, 1000)
            .addClass('active')
            .removeClass('inactive');
        current_element.effect( "slide", hiding_image, 1000)
            .removeClass('active');
    }

});

---

谢谢大家!

真的看不出你错在哪里了。但我确实更新了你的代码

[新小提琴]

希望这有助于：

[编辑] 我已经更新了一点代码。输入stop（）以停止动画。还更改了css，以便在初始加载时始终隐藏幻灯片

问题是幻灯片效果删除了幻灯片中的所有类。因此，如果再次单击幻灯片按钮，它将无法确定正确的幻灯片，并显示一个空白div

$(document).ready(function () {
    $('.slide.inactive').hide();
    $('.slide.active').show();

    var slides = $('.slide');
    var active = 0;

    $('.move-slide').click(function () {

        var direction = "right";
        if ($(this).hasClass('glyphicon-chevron-left')) {
            direction = 'left';
        }
        var activeSlide = $(slides[active]);
        var slideToSlide;

        if (direction == 'right') {
            slideTo = active + 1;
            hiding_image = {"direction" : "right", "mode" : "hide"};
            showing_image = {"direction" : "left", "mode" : "show"};

        } else {
            slideTo = active - 1;
            hiding_image = {"direction" : "left", "mode" : "hide"};
            showing_image = {"direction" : "right", "mode" : "show"};
        }

        if (slideTo >= slides.length) {
            slideTo = 0;
        } else if (slideTo < 0) {
            slideTo = slides.length - 1;
        }

        slideToSlide = $(slides[slideTo]);

        slideToSlide.addClass('active').removeClass('inactive');
        activeSlide.removeClass('active').addClass('inactive');

        slideToSlide.stop(true, true).effect("slide", showing_image, 1000);
        activeSlide.stop(true, true).effect("slide", hiding_image, 1000);

        active = slideTo;

    });

});

$（文档）.ready（函数（）{
$（'.slide.inactive'）.hide（）；
$（'.slide.active'）.show（）；
变量幻灯片=$（'.slide'）；
var-active=0；
$（'.move slide'）。单击（函数（）{
var direction=“right”；
if（$（this）.hasClass（'glyphicon-chevron-left'））{
方向='左'；
}
var activeSlide=$（slides[active]）；
var幻灯片；
如果（方向=‘右’）{
slideTo=active+1；
隐藏图像={“方向”：“右”，“模式”：“隐藏”}；
显示图像={“方向”：“左”，“模式”：“显示”}；
}否则{
slideTo=active-1；
隐藏图像={“方向”：“左”，“模式”：“隐藏”}；
显示图像={“方向”：“右”，“模式”：“显示”}；
}
如果（slideTo>=slides.length）{
slideTo=0；
}否则如果（滑动到<0）{
slideTo=slides.length-1；
}
slideToSlide=$（幻灯片[slideTo]）；
slideToSlide.addClass（'active'）。removeClass（'inactive'）；
activeSlide.removeClass（'active'）.addClass（'inactive'）；
slideToSlide.stop（真，真）效果（“幻灯片”，显示图片，1000）；
activeSlide.stop（真，真）效果（“幻灯片”，隐藏图像，1000）；
活动=滑动到；
});
});

看起来不错，但当您单击时，白色屏幕会显示几秒钟，然后当您向右滑动时，您可以看到该图片正在消失。我再次更新了它。希望它现在对你有用