jQuery settimeout триггерное событие для плагина

0

хорошо, поэтому я загрузил этот довольно классный простой плагин из codrops, но я хотел бы реализовать функцию авто слайда и потерять на том, как вызывается обновление. я хотел бы сделать две вещи, которые вызывают функцию обновления глобально через другие ссылки на странице. Также мне хотелось бы скомпилировать функцию обновления до заданного интервала. теперь я знаю, что циклы выполняются через set-timeout а симулирующие события выполняются с помощью trigger но у меня нет подсказки, потому что на самом деле у меня есть 2 из этих плагинов на странице, и я хочу быть прав, когда я их внедряю. Однако я im brand new пытаясь создать и манипулировать плагинами благодаря продвинутому.

HTML:

<div id="panel1" class="cbp-contentslider">
            <ul>
                <li id="slide1">
                    <h3 class="icon-wolf">Wolf</h3>
                    <div>
                        <div class="cbp-content">

                        </div>
                    </div>
                </li>           
            </ul>
            <nav>
                <a href="#slide1" class="icon-wolf"><span>Wolf</span></a>
            </nav>
        </div>

ЯШ:

( function( $, window, undefined ) {

    'use strict';

    // global
    var Modernizr = window.Modernizr;

    $.CBPContentSlider = function( options, element ) {
        this.$el = $( element );
        this._init( options );
    };

    // the options
    $.CBPContentSlider.defaults = {
        // default transition speed (ms)
        speed : 500,
        // default transition easing
        easing : 'ease-in-out',
        // current item index
        current : 0
    };

    $.CBPContentSlider.prototype = {
        _init : function( options ) {

            // options
            this.options = $.extend( true, {}, $.CBPContentSlider.defaults, options );
            // the items
            this.$items = this.$el.find( 'ul > li' ).hide();
            // the tabs
            this.$tabs = this.$el.find( 'nav > a' );
            // total tabs
            var tabsCount = this.$tabs.length;
            // set each tab width
            this.$tabs.css( 'width', 100 / tabsCount + '%' );
            // current and old item index
            this.current = this.options.current;
            this.old = 0;
            // check if the items are currently moving
            this.isAnimating = false;
            // support for CSS Transitions
            this.support = Modernizr.csstransitions;
            // transition end event name
            var transEndEventNames = {
                'WebkitTransition' : 'webkitTransitionEnd',
                'MozTransition' : 'transitionend',
                'OTransition' : 'oTransitionEnd',
                'msTransition' : 'MSTransitionEnd',
                'transition' : 'transitionend'
            };
            this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.cbpContentSlider';
            // set the transition to the items
            if( this.support ) {
                this.$items.css( 'transition', 'left ' + this.options.speed + 'ms ' + this.options.easing );
            }
            // update current tab
            this._updateTabs();
            // show current item
            this.$items.eq( this.current ).show();
            // initialize/bind the events to the tabs
            this._initEvents();

        },
        _updateTabs : function() {
            this.$tabs.eq( this.old ).removeClass( 'rc-active' ).end().eq( this.current ).addClass( 'rc-active' );
        },
        _initEvents : function() {

            var self = this;
            this.$tabs.on( 'click.cbpContentSlider', function( event ) {

                var idx = $( this ).index();

                if( idx !== self.current && !self.isAnimating ) {

                    self.isAnimating = true;

                    var direction = idx > self.current ? 'right' : 'left',
                        $oldItem = self.$items.eq( self.current ),
                        $newItem = self.$items.eq( idx );

                    // update current and old value
                    self.old = self.current;
                    self.current = idx;

                    // apply initial style..
                    if( self.support ) {
                        // translate might be more efficient here. Left out because of a rounding and rendering problem in Chrome (Version 24.0.1312.52)
                        $newItem.css( 'left', direction === 'right' ? '100%' : '-100%' );
                    }
                    $newItem.show();

                    // ..and bind the transitionend event
                    var transitionendfn = function() {
                        $oldItem.off( self.transEndEventName ).hide();
                        self.isAnimating = false;
                    };

                    if( self.support ) {
                        $oldItem.on( self.transEndEventName, transitionendfn );
                    }
                    else {
                        transitionendfn.call();
                    }

                    // apply final style
                    if( self.support ) {
                        setTimeout( function() {
                            // translate might be more efficient here. Left out because of a rounding and rendering problem in Chrome (Version 24.0.1312.52)
                            $oldItem.css( 'left', direction === 'right' ? '-100%' : '100%' );
                            $newItem.css( 'left', '0%' );
                        }, 25 );
                    }

                    // update current tab
                    self._updateTabs();

                }

                event.preventDefault();

            } );

        },
        destroy : function() {
            if( this.support ) {
                this.$items.css( 'transition', 'none' );
            }
            this.$items.css( 'left', 0 ).show();
            this.$tabs.off( '.cbpContentSlider' ).removeClass( 'rc-active' );
        }
    };

    var logError = function( message ) {
        if ( window.console ) {
            window.console.error( message );
        }
    };

    $.fn.cbpContentSlider = function( options ) {
        if ( typeof options === 'string' ) {
            var args = Array.prototype.slice.call( arguments, 1 );
            this.each(function() {
                var instance = $.data( this, 'cbpContentSlider' );
                if ( !instance ) {
                    logError( "cannot call methods on cbpContentSlider prior to initialization; " +
                    "attempted to call method '" + options + "'" );
                    return;
                }
                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                    logError( "no such method '" + options + "' for cbpContentSlider instance" );
                    return;
                }
                instance[ options ].apply( instance, args );
            });
        } 
        else {
            this.each(function() {  
                var instance = $.data( this, 'cbpContentSlider' );
                if ( instance ) {
                    instance._init();
                }
                else {
                    instance = $.data( this, 'cbpContentSlider', new $.CBPContentSlider( options, this ) );
                }
            });
        }
        return this;
    };

} )( jQuery, window );
Теги:
plugins
settimeout
triggers

1 ответ

0

Добавьте класс, подобный myLink ко всем ссылкам в шоу, которое вы хотите автозапускать. Тогда вы можете сделать что-то вроде:

$(document).ready(function() {
     $('.myLink').each(function(k,v){
          setTimeout(function() {
               $(this).trigger('click');
          }, 3000);
     });
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню