jQuery幻灯片放映

Posted 2021-02-25

/**
 * jQuery-slideShow
 * Thanks to Ariel Flesler for is jQuery.ScrollShow
 * Date: 10/02/2010
 * @author Christophe LAFFONT
 * @version 1.0
 **/
(function($) {
    $.fn.slideShow = function(options){
        var defaults = {
            view: '.view',      // Selector for element (ul) view
            navigators:null,    // Selector (Next/Prev) 
            circular:false,     // Should the slideshow rewind/advance on the extremes ?.
            easing:'linear',    // Animation
            speed: 500,         // Speed 
            start:0,            // Force to start at some position element
            ga: false           // Google Analytics
        };
 
        var settings = $.extend(defaults, options);
 
        this.each(function() {
 
            // SET THE VARIABLES
            var 
                widget     = this,
                $view      = settings.view ? $(settings.view, this) : this,
                $elements  = $('li', $view),
                dim        = { w: $elements.outerWidth(true), h: $elements.height() }, 
                limit      = $elements.length - Math.ceil($(widget).innerWidth() / dim.w),
                $pos     = $('#pos'),
                active     = 0; 
 
            // Add Google Analytics
            if(settings.ga && undefined!==window.pageTracker){
                $view.bind('click', function(e){
                    var href = $(e.target).closest("a").attr('href');
                    if(href !== undefined){ 
                        pageTracker._trackPageview('/external/'+href);
                    }
                });
            }
 
            // Secure - Check if we have enough elements
            if( $elements.length <= limit){
                return;
            }
 
            function sequential( event ){
                event.data.pos = active + event.data.dir;
                return random( event );
            }
 
            function animate(pos){
                 if(settings.easing){
                    $view
                        .stop()
                        .animate(
                            { marginLeft: -((pos) * dim.w) + 'px' },
                            { queue: false, duration: settings.speed, easing: settings.easing }
                        );
                }else{
                    $elements
                        .hide()
                        .eq(pos)
                        .show();
                }
 
                // Update Position / Total
                $pos.html(pos+1 + ' / ' + $elements.length);
 
                active = pos;
 
                return;
            }
 
            function random( event ){
                var pos = typeof event == 'number' ? event : event.data.pos;
 
                if( pos < 0 ){
                    pos = active === 0 && settings.circular ? limit : 0;
                    which = 0;
                }
                else if( pos > limit ){
                    pos = active == limit && settings.circular ? 0 : limit;
                    which = 1;
                }
 
                animate(pos);
 
                active = pos;
 
                return false;
            }
 
            // CLICK
            $(settings.navigators,widget)
                .show()
                .find('a')
                .eq(0).bind('click.prev', { dir: -1 }, sequential ).end()
                .eq(1).bind('click.next', { dir: +1 }, sequential );
 
            // INIT
            if( settings.start !== null ){
                random( settings.start );
            }
 
        }); 
    };
 
})(jQuery);