0

スライドショーに Fotorama を使用していますが、最後の画像でスライドを停止するオプションがプリセットにありません...

次のスクリプトにはナビゲーションボタンが含まれており、役立つかもしれないので投稿しています...調べていましたが、jqueryのコーディングに慣れていません...しかし、理解しようとしています

var size - 5 がスクリプトにスライドの数を伝える方法に気付きました...そして var intervalInput = $('#fotorama-interval'); があります。最後の画像に達したことをスライドショーに伝えるために必要かもしれないと思いますか?

できれば助けてください

<script>
    $(function () {
        var $document = $(document);
        var stage = $('#chromeless-stage');
        var control = $('#fotorama-control');
        var fotorama = $('#fotorama');

        var activeIndex;
        var arrows = $('#fotorama-arrows').find('input');
        var thumbs = $('#fotorama-thumbs').find('a');

        var size = 5;

        // FOTORAMA
        fotorama.fotorama({
            data: [
                {img: 'images/start-slide-1.jpg'},
                {img: 'images/start-slide-2.jpg'},
                {img: 'images/start-slide-3.jpg'},
                {img: 'images/start-slide-4.jpg'},
                {img: 'images/start-slide-5.jpg'}

            ],
            width: '100%',
            height: 'auto',
            minHeight: 600,
            fitToWindowHeight: true,
            fitToWindowHeightMargin: 0,
            margin: 0,
            cropToFit: true,
            shadows: false,
            transitionDuration: 888,
            loop: true,
            autoplay: 2500,
            stopAutoplayOnAction: false,
            transition: 'fade', 
            nav: 'none', 
            arrows: false,

            onClick: function(data)
            { window.location = 'about-ana-parzych-custom-cakes.html' },

            /*transition: fade,*/

            onShowImg: function(data, auto) {
                if (!auto && playingFLAG) {
                    pause();
                }
                activeIndex = data.index;
                thumbs.not(
                        thumbs.eq(activeIndex).addClass('active')
                    ).removeClass('active');

                if (activeIndex == 0) {
                    arrows.slice(0,2).attr({disabled: 'disabled'});
                } else {
                    arrows.slice(0,2).removeAttr('disabled');
                }

                if (activeIndex == size - 1) {
                    arrows.slice(2).attr({disabled: 'disabled'});
                } else {
                    arrows.slice(2).removeAttr('disabled');
                }
            }
        });

        // SLIDESHOW
        var playButton = $('#fotorama-play');
        var pauseButton = $('#fotorama-pause');
        var intervalInput = $('#fotorama-interval');

        var playingFLAG = false;

        function changeThumbBorderColor() {
            thumbs.parent()[(playingFLAG ? 'add' : 'remove') + 'Class']('autoplay');
        }

        function start() {
            fotorama.trigger('play'); // Start playing
            playingFLAG = false;

            playButton.attr('disabled', 'disabled');
            pauseButton.removeAttr('disabled');
            changeThumbBorderColor();
        }

        function pause() {
            fotorama.trigger('pause'); // Pause
            playingFLAG = true;

            pauseButton.attr('disabled', 'disabled');
            playButton.removeAttr('disabled');
            changeThumbBorderColor();
        }

        playButton.click(start);
        pauseButton.click(pause);

        // Custom interval
        intervalInput.bind('click change keypress cut copy paste input', function(){
            fotorama.data('options').autoplay = intervalInput.val()*1000;
            if (playingFLAG) {
                fotorama.trigger('pause');
                fotorama.trigger('play');
            }
        });

        // CUSTOM THUMBS AND ARROWS
        arrows.bind('click', function(){
            var index = $(this).attr('data-action');
            if (index == 'next') {
                index = activeIndex + 1;
            } else if (index == 'prev') {
                index = activeIndex - 1;
            }

            if (index > size - 1) {
                index = size - 1;
            }

            if (index < 0) {
                index = 0;
            }

            fotorama.trigger('showimg', index);
        });

        thumbs.bind('click', function(e){
            fotorama.trigger('showimg', thumbs.index(this));
            return false;
        });

        $document.bind('keydown', function(e){
            if (!fotorama.hasClass('fotorama_fullscreen') && !intervalInput.is(':focus')) {
                if (e.keyCode == 39 || e.keyCode == 40) {
                    fotorama.trigger('showimg', 'next');
                    return false;
                } else if (e.keyCode == 37 || e.keyCode == 38) {
                    fotorama.trigger('showimg', 'prev');
                    return false;
                }
            }
        });

        // FULLSCREEN
        $('#fotorama-fullscreen').bind('click', function(){
            fotorama.trigger('fullscreenopen');
        });

        // RESCALE
        /*var rescale = $('#fotorama-rescale').find('input');
        rescale.bind('click', function(){
            var $this = $(this);
            rescale.not(
                    $this.attr({disabled: 'disabled'})
                ).removeAttr('disabled');
            var newSize = $this.val().split(', ');
            var width = newSize[0];
            var height = newSize[1];
            if (width == '100%') {
                width = stage.width();
                control.css({width: '50%'});
            } else {
                control.css({width: ''});
            }

            fotorama.trigger('rescale', [width, false, 700/467, 333]);
        });*/
    });
</script>
4

1 に答える 1

1

Fotorama 3 を使用している場合:

var fotorama = $('#fotorama');
fotorama.fotorama({
    onShowImg: function () {
        var data = fotorama.data();
        if (data.size - data.index === 1) {
            fotorama.trigger('pause');
        } 
    }
});

フィドル: http://jsfiddle.net/artpolikarpov/67e4q/12/


Fotorama 4 には別の API があります。

$('.fotorama').on('fotorama:showend', function (e, fotorama) {
    if (fotorama.size - fotorama.activeIndex === 1) {
        fotorama.stopAutoplay();
    }
});

フィドル: http://jsfiddle.net/artpolikarpov/HRzdw/

于 2013-06-29T16:20:32.917 に答える