Javascript-форум - Показать сообщение отдельно - Не могу сделать в JCarousel autoscroll и цикличное прокручивание

mad_din · #1 (**permalink**) 18.03.2014, 19:01

Начну с того, что я только начал изучать и java script и jquery. Надо мне сделать чтобы JCarousel подойдя к концу снова начинала с первого слайда.

в html:

<head>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="./js/jcarousel.js"></script>
<script type="text/javascript" src="./js/jquery.jcarousel-autoscroll.js"></script>
</head>
<body>
<div class="jcarousel">
    <div class="stage">
        <div class="carousel carousel-stage" data-jcarousel="true">
            <ul id="mycarousel" style="left: -1200px; top: 0px;">
                <li><img src="./img/1.jpg" width="1200" height="380" alt=""></li>
                <li><img src="./img/2.jpg" width="1200" height="380" alt=""></li>
                <li><img src="./img/3.jpg" width="1200" height="380" alt=""></li>
             </ul>
        </div>
<a href="#" class="prev prev-stage" data-jcarouselcontrol="true"><span>&lsaquo;</span></a>
<a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>&rsaquo;</span></a>
     </div>
</div>
</body>

В jquery.jcarousel-autoscroll.js :

/*! jCarousel - v0.3.0 - 2013-11-22
* [url]http://sorgalla.com/jcarousel[/url]
* Copyright (c) 2013 Jan Sorgalla; Licensed MIT */
(function($) {
    '#mycarousel';

    $.jCarousel.plugin('jcarouselAutoscroll', {
        _options: {
            target:    '+=1',
            interval:  4000,
            autostart: true
        },
        _timer: null,
        _init: function () {
            this.onDestroy = $.proxy(function() {
                this._destroy();
                this.carousel()
                    .one('jcarousel:createend', $.proxy(this._create, this));
            }, this);

            this.onAnimateEnd = $.proxy(this.start, this);
        },
        _create: function() {
            this.carousel()
                .one('jcarousel:destroy', this.onDestroy);

            if (this.options('autostart')) {
                this.start();
            }
        },
        _destroy: function() {
            this.stop();
            this.carousel()
                .off('jcarousel:destroy', this.onDestroy);
        },
        start: function() {
            this.stop();

            this.carousel()
                .one('jcarousel:animateend', this.onAnimateEnd);

            this._timer = setTimeout($.proxy(function() {
                this.carousel().jcarousel('scroll', this.options('target'));
            }, this), this.options('interval'));

            return this;
        },
        stop: function() {
            if (this._timer) {
                this._timer = clearTimeout(this._timer);
            }

            this.carousel()
                .off('jcarousel:animateend', this.onAnimateEnd);

            return this;
        }
    });
}(jQuery));

В jcarousel.js :

(function($) {

    var connector = function(itemNavigation, carouselStage) {
        return carouselStage.jcarousel('items').eq(itemNavigation.index());
    };

    $(function() {

        var carouselStage      = $('.carousel-stage').jcarousel();
        var carouselNavigation = $('.carousel-navigation').jcarousel();

        carouselNavigation.jcarousel('items').each(function() {
            var item = $(this);

            var target = connector(item, carouselStage);

            item
                .on('jcarouselcontrol:active', function() {
                    carouselNavigation.jcarousel('scrollIntoView', this);
                    item.addClass('active');
                })
                .on('jcarouselcontrol:inactive', function() {
                    item.removeClass('active');
                })
                .jcarouselControl({
                    target: target,
                    carousel: carouselStage
                });
        });


        $('.prev-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.next-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });


        $('.prev-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.next-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });


        $('.jcarousel')
        .jcarouselAutoscroll({
            interval: 4000,
            target: '+=1',
            autostart: true
        });

    });
})(jQuery);