Coinslider ...添加代码以停止循环

Question

我在我的网站上使用了Coin Slider，但是当我的客户要求我在最后一张幻灯片上停止播放幻灯片时，我今天遇到了一个非常意外的惊喜。显然它不是内置的，没有选择让它停止。

我希望有人可以帮我找到它在脚本中循环的位置并建议添加此选项的方法。

我甚至不介意有两个版本的脚本，一个循环，一个不循环。

function loadContent(elementSelector, sourceURL) {
    $(""+elementSelector+"").load("http://localhost/auxtest/"+sourceURL+"");
}

(function($) {

var params      = new Array;
var order       = new Array;
var images      = new Array;
var links       = new Array;
var linksTarget = new Array;
var titles      = new Array;
var interval    = new Array;
var imagePos    = new Array;
var appInterval = new Array;    
var squarePos   = new Array;    
var reverse     = new Array;

$.fn.coinslider= $.fn.CoinSlider = function(options){

    init = function(el){

        order[el.id]        = new Array();  // order of square appereance
        images[el.id]       = new Array();
        links[el.id]        = new Array();
        linksTarget[el.id]  = new Array();
        titles[el.id]       = new Array();
        imagePos[el.id]     = 0;
        squarePos[el.id]    = 0;
        reverse[el.id]      = 1;                        

        params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);

        // create images, links and titles arrays
        $.each($('#'+el.id+' img'), function(i,item){
            images[el.id][i]        = $(item).attr('src');
            links[el.id][i]         = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
            linksTarget[el.id][i]   = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
            titles[el.id][i]        = $(item).next().is('span') ? $(item).next().html() : '';
            $(item).hide();
            $(item).next().hide();
        });         


        // set panel
        $(el).css({
            'background-image':'url('+images[el.id][0]+')',
            'width': params[el.id].width,
            'height': params[el.id].height,
            'position': 'relative',
            'background-position': 'top left'
        }).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");  


        // create title bar
        $('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position:absolute; bottom:0; left:0; z-index: 1000;'></div>");

        $.setFields(el);

        if(params[el.id].navigation)
            $.setNavigation(el);

        $.transition(el,0);
        $.transitionCall(el);

    }

    // squares positions
    $.setFields = function(el){

        tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
        tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);

        counter = sLeft = sTop = 0;
        tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
        tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;

        for(i=1;i <= params[el.id].sph;i++){
            gapx = tgapx;

                if(gapy > 0){
                    gapy--;
                    sHeight = tHeight+1;
                } else {
                    sHeight = tHeight;
                }

            for(j=1; j <= params[el.id].spw; j++){  

                if(gapx > 0){
                    gapx--;
                    sWidth = tWidth+1;
                } else {
                    sWidth = tWidth;
                }

                order[el.id][counter] = i+''+j;
                counter++;

                if(params[el.id].links)
                    $('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
                else
                    $('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");

                // positioning squares
                $("#cs-"+el.id+i+j).css({ 
                    'background-position': -sLeft +'px '+(-sTop+'px'),
                    'left' : sLeft ,
                    'top': sTop
                });

                sLeft += sWidth;
            }

            sTop += sHeight;
            sLeft = 0;                  

        }


        $('.cs-'+el.id).mouseover(function(){
            $('#cs-navigation-'+el.id).show();
        });

        $('.cs-'+el.id).mouseout(function(){
            $('#cs-navigation-'+el.id).hide();
        }); 

        $('#cs-title-'+el.id).mouseover(function(){
            $('#cs-navigation-'+el.id).show();
        });

        $('#cs-title-'+el.id).mouseout(function(){
            $('#cs-navigation-'+el.id).hide();
        }); 

        if(params[el.id].hoverPause){   
            $('.cs-'+el.id).mouseover(function(){
                params[el.id].pause = true;
            });

            $('.cs-'+el.id).mouseout(function(){
                params[el.id].pause = false;
            }); 

            $('#cs-title-'+el.id).mouseover(function(){
                params[el.id].pause = true;
            });

            $('#cs-title-'+el.id).mouseout(function(){
                params[el.id].pause = false;
            }); 
        }


    };


    $.transitionCall = function(el){

        clearInterval(interval[el.id]); 
        delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
        interval[el.id] = setInterval(function() { $.transition(el)  }, delay);

    }

    // transitions
    $.transition = function(el,direction){

        if(params[el.id].pause == true) return;

        $.effect(el);

        squarePos[el.id] = 0;
        appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]])  },params[el.id].sDelay);

        $(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });

        if(typeof(direction) == "undefined")
            imagePos[el.id]++;
        else
            if(direction == 'prev')
                imagePos[el.id]--;
            else
                imagePos[el.id] = direction;

        if  (imagePos[el.id] == images[el.id].length) {
            imagePos[el.id] = 0;
        }

        if (imagePos[el.id] == -1){
            imagePos[el.id] = images[el.id].length-1;
        }

        $('.cs-button-'+el.id).removeClass('cs-active');
        $('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');

        if(titles[el.id][imagePos[el.id]]){
            $('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
            $('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
        } else {
            $('#cs-title-'+el.id).css('opacity',0);
        }               

    };

    $.appereance = function(el,sid){

        $('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);

        if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
            clearInterval(appInterval[el.id]);
            return;
        }

        $('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
        $('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
        squarePos[el.id]++;

    };

    // navigation
    $.setNavigation = function(el){
        // create prev and next 
        $(el).append("<div id='cs-navigation-"+el.id+"'></div>");
        $('#cs-navigation-'+el.id).hide();

        $('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>&nbsp;</a>");
        $('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>&nbsp;</a>");
        $('#cs-navigation-'+el.id).append("<a href='javascript:loadContent('#world', 'auxworld.php');' id='cs-back-"+el.id+"' class='cs-back'>&nbsp;</a>");
        $('#cs-prev-'+el.id).css({
            'position'  : 'absolute',
            'top'       : params[el.id].height/2 - 15,
            'left'      : 0,
            'z-index'   : 1001,
            'line-height': '30px',
            'opacity'   : params[el.id].opacity
        }).click( function(e){
            e.preventDefault();
            $.transition(el,'prev');
            $.transitionCall(el);       
        }).mouseover( function(){ $('#cs-navigation-'+el.id).show() });

        $('#cs-next-'+el.id).css({
            'position'  : 'absolute',
            'top'       : params[el.id].height/2 - 15,
            'right'     : 0,
            'z-index'   : 1005,
            'line-height': '30px',
            'opacity'   : params[el.id].opacity
        }).click( function(e){
            e.preventDefault();
            $.transition(el);
            $.transitionCall(el);
        }).mouseover( function(){ $('#cs-navigation-'+el.id).show() });

        $('#cs-back-'+el.id).css({
            'position'  : 'absolute',
            'top'       : params[el.id].height/2 - 15,
            'right'     : 0,
            'z-index'   : 1001,
            'line-height': '30px',
            'opacity'   : params[el.id].opacity
        }).click( function(){
             window.location.replace('index.php');
            // loadContent('#world', 'auxworld.php'); 
        }).mouseover( function(){ $('#cs-navigation-'+el.id).show() });



        // image buttons
        $("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));


        for(k=1;k<images[el.id].length+1;k++){
            $('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
        }

        $.each($('.cs-button-'+el.id), function(i,item){
            $(item).click( function(e){
                $('.cs-button-'+el.id).removeClass('cs-active');
                $(this).addClass('cs-active');
                e.preventDefault();
                $.transition(el,i);
                $.transitionCall(el);               
            })
        }); 

        $('#cs-navigation-'+el.id+' a').mouseout(function(){
            $('#cs-navigation-'+el.id).hide();
            params[el.id].pause = false;
        });                     

        $("#cs-buttons-"+el.id).css({
            'left'          : '50%',
            'margin-left'   : -images[el.id].length*15/2-5,
            'position'      : 'relative'

        });


    }




    // effects
    $.effect = function(el){

        effA = ['random','swirl','rain','straight'];
        if(params[el.id].effect == '')
            eff = effA[Math.floor(Math.random()*(effA.length))];
        else
            eff = params[el.id].effect;

        order[el.id] = new Array();

        if(eff == 'random'){
            counter = 0;
              for(i=1;i <= params[el.id].sph;i++){
                for(j=1; j <= params[el.id].spw; j++){  
                    order[el.id][counter] = i+''+j;
                    counter++;
                }
              } 
            $.random(order[el.id]);
        }

        if(eff == 'rain')   {
            $.rain(el);
        }

        if(eff == 'swirl')
            $.swirl(el);

        if(eff == 'straight')
            $.straight(el);

        reverse[el.id] *= -1;
        if(reverse[el.id] > 0){
            order[el.id].reverse();
        }

    }


    // shuffle array function
    $.random = function(arr) {

      var i = arr.length;
      if ( i == 0 ) return false;
      while ( --i ) {
         var j = Math.floor( Math.random() * ( i + 1 ) );
         var tempi = arr[i];
         var tempj = arr[j];
         arr[i] = tempj;
         arr[j] = tempi;
       }
    }   

    //swirl effect by milos popovic
    $.swirl = function(el){

        var n = params[el.id].sph;
        var m = params[el.id].spw;

        var x = 1;
        var y = 1;
        var going = 0;
        var num = 0;
        var c = 0;

        var dowhile = true;

        while(dowhile) {

            num = (going==0 || going==2) ? m : n;

            for (i=1;i<=num;i++){

                order[el.id][c] = x+''+y;
                c++;

                if(i!=num){
                    switch(going){
                        case 0 : y++; break;
                        case 1 : x++; break;
                        case 2 : y--; break;
                        case 3 : x--; break;

                    }
                }
            }

            going = (going+1)%4;

            switch(going){
                case 0 : m--; y++; break;
                case 1 : n--; x++; break;
                case 2 : m--; y--; break;
                case 3 : n--; x--; break;       
            }

            check = $.max(n,m) - $.min(n,m);            
            if(m<=check && n<=check)
                dowhile = false;

        }
    }

    // rain effect
    $.rain = function(el){
        var n = params[el.id].sph;
        var m = params[el.id].spw;

        var c = 0;
        var to = to2 = from = 1;
        var dowhile = true;


        while(dowhile){

            for(i=from;i<=to;i++){
                order[el.id][c] = i+''+parseInt(to2-i+1);
                c++;
            }

            to2++;

            if(to < n && to2 < m && n<m){
                to++;   
            }

            if(to < n && n>=m){
                to++;   
            }

            if(to2 > m){
                from++;
            }

            if(from > to) dowhile= false;

        }           

    }

    // straight effect
    $.straight = function(el){
        counter = 0;
        for(i=1;i <= params[el.id].sph;i++){
            for(j=1; j <= params[el.id].spw; j++){  
                order[el.id][counter] = i+''+j;
                counter++;
            }

        }
    }

    $.min = function(n,m){
        if (n>m) return m;
        else return n;
    }

    $.max = function(n,m){
        if (n<m) return m;
        else return n;
    }       

this.each (
    function(){ init(this); }
);


};


// default values
$.fn.coinslider.defaults = {       
     width: 1230, // width of slider panel  
     height: 500, // height of slider panel  
     spw: 20, // squares per width  
     sph: 1, // squares per height  
     delay: 7000, // delay between images in ms  
     sDelay: .1, // delay beetwen squares in ms  
     opacity: 0.9, // opacity of title and navigation  
     titleSpeed: 1160, // speed of title appereance in ms  
     effect: 'rain', // random, swirl, rain, straight  
     navigation: true, // prev next and buttons  
     links : false, // show images as links   
     hoverPause: true // pause on hover            
};

})(jQuery);

Answer 1

我已经使用额外选项stopAtLastSlide更新了硬币滑块的代码，可以传递给coinslider函数，当它到达最后一张图像时停止自动旋转。

在此处查看工作示例http://jsfiddle.net/wtk_pl/Lrsj2/7/。更新硬币滑块的源代码可在https://github.com/WTK/Coin-Slider找到。

Answer 2

我会尝试修改$.transitionCall函数。此设置是显示下一个元素的新超时。

也许你可以在这里找到它是否想要渲染最后一个元素，然后跳过设置间隔

$.transitionCall = function(el) {

    clearInterval(interval[el.id]);
    delay = params[el.id].delay + params[el.id].spw * params[el.id].sph * params[el.id].sDelay;
    interval[el.id] = setInterval(function() {
        $.transition(el)
    }, delay);

}

不停止间隔的另一个选项是设置params[el.id].pause = true;