anita 提供的 jQuery 版的廣告輪播加強版 (v1.1)

上次Anita 提供的輪播 jQuery, 其實有2個小地方不太美觀, 這次找到時間就把他改掉, 雖然沒有寫的很完美, 但加減可以用, 致少有改善...

1. 調整圖片輪播的方式, 當輪到最後一張時, 不是切到第1張, 而是從右向左輪播.

2. 調整圖片與圖片間的間距, 如下圖所示, 原本會多空500 px的空白.

修改後的 javascript 如下: 

$(function(){
 slider.init();
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:3*1000,
 ar:true,
 imagesize:520,
 direction:1,
 init:function(){
    if(!slider.data || !slider.data.length)
        return false;
    var d=slider.data;
    slider.num=d.length;
    var pos=Math.floor(Math.random()*1);  //slider.num);
    for(var i=0;i<slider.num;i++){
        $('#'+d[i].id).css({left:((i-pos)*slider.imagesize)});
        $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
    }

    $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
    slider.text(d[pos]);
    slider.on(pos);
    slider.cur=pos;
    window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
    if(!slider.ar)
        return false;
    var next=slider.cur+slider.direction;
    if(next>=slider.num){
        slider.direction*=-1;
        next=slider.num-2;
    }
    if(next<=0){
        slider.direction*=-1;
        next=0;
    }
    slider.slide(next);
 },
 slide:function(pos){
    if(pos<0 || pos>=slider.num || pos==slider.cur)
        return;
    window.clearTimeout(slider.al);
    slider.al=window.setTimeout('slider.auto();',slider.at);
    var d=slider.data;
    for(var i=0;i<slider.num;i++)
        $('#'+d[i].id).stop().animate({left:((i-pos)*slider.imagesize)},1000,'swing');
    slider.on(pos);
    slider.text(d[pos]);
    slider.cur=pos;
 },
 on:function(pos){
    $('#slide-nav a').removeClass('on');
    $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
    slider.cr['a']=di.client;
    slider.cr['b']=di.desc;
    slider.ticker('#slide-client span',di.client,0,'a');
    slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
    if(slider.cr[unique]!=text)
        return false;
    ctext=text.substring(0,pos)+(pos%2?'-':'_');
    $(el).html(ctext);
    if(pos==text.length)
        $(el).html(text);
    else
        window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};

相關文章:
anita 提供的 jQuery 版的廣告輪播
http://maxtellyou.blogspot.tw/2012/06/anita-jquery.html