Question

我正在做一个html演示文稿。它有15张幻灯片。我已经完成所有工作，但是当我到达上一张幻灯片时，您可以继续按向左箭头键（转到下一张幻灯片的按键）以转到我没有使用甚至期望放在那里的幻灯片。如何在最后一张幻灯片上停止从幻灯片到幻灯片的过渡。

这就是我所有的javascript

var Slides = {
    currentSlide: 0,
    totalSlides: '',
    slideWidth: '',
    translateAmount: 0,
    container: $("#slides"),

    init: function(totalSlides) {
        var each;

        if(!totalSlides) throw new Error('Please pass the number of slides');
        Slides.totalSlides = totalSlides;
        Slides.loadContent();
        each = Slides.container.children('div');
        Slides.slideWidth = each.width() + (parseInt(each.css('margin-right'), 10));
        Slides.keyPress();
    },
    loadContent: function() {
        Slides.container.hide();
        for (var i = 0; i < Slides.totalSlides; i++) {
            $('<div id="#slide-' +i+ '"></div>')
            .load('slides/' +i+ '.html')
            .appendTo(Slides.container);
        }
        Slides.container.show();
    },
    keyPress: function() {
        $(document.body).keydown(function(e) {
            if(e.keyCode === 39 || e.keyCode === 37) {
                e.preventDefault();
                (e.keyCode === 39)?Slides.next():Slides.prev();
            }
        });
    },
    next: function() {
        Slides.translateAmount -= Slides.slideWidth;
        Slides.updateHash(++Slides.currentSlide);
        Slides.animate();
    },
    prev: function() {
        if(Slides.translateAmount === 0) return;

        Slides.translateAmount += Slides.slideWidth;
        Slides.updateHash(--Slides.currentSlide);
        Slides.animate();
    },
    animate: function() {
        Slides.container
            .children()
                .css('-webkit-transform', 'translateX(' +Slides.translateAmount+ 'px)');

    },
    updateHash: function() {
        location.hash = '#slide-' +Slides.currentSlide;
    }
}

Slides.init(15);

Answer 1

您可以检查currentSlide是否等于14（假设幻灯片从0开始）。如果为真，则只需从next函数返回

next: function() {
    if (currentSlide === 14)   
        return;

    Slides.translateAmount -= Slides.slideWidth;
    Slides.updateHash(++Slides.currentSlide);
    Slides.animate();
}

如何在上一张幻灯片中停止我的HTML演示文稿？

1 个答案: