Question

我制作了一个滑块（http://jsfiddle.net/k8f6wp17/），问题出现在右键。单击它时，它只播放＃slide2和＃slide3。还有一件事，如果您对如何重置它有任何建议。我的意思是在＃slide3之后它应该播放＃slide1。和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');
    }

});

谢谢！

Answer 1

无法真正看出你哪里出错了。但我确实更新了你的代码

[新小提琴] http://jsfiddle.net/pierreduc/k8f6wp17/3/

希望这会有所帮助：

[编辑] 我已经更新了一些代码。放入一个停止（）让动画停止。更改了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;

    });

});

Jquery滑块修复

1 个答案: