2011-06-30 78 views
1

林過渡jQuery的小白,只是有一個關於我使用了一個滑塊,基於這一個問題:http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.htmlJQuery的滑塊:從最後一個圖像到第一

我修改CSS來調整滑塊我我正在使用,一切都很好。目前發生的情況是,我有7張圖像,全部向滑動,當它進入循環/第7張圖像的末尾時,它將向右移動,顯示1-7中的所有圖像,直到返回圖像1,然後再次啓動滑動循環。

我想要做的是使圖像7轉到圖像1向左,因爲它是一個連續的循環,而不是一個回到開始。有什麼建議麼?

PS。我使用jQuery 1.2.6

window.onerror=function(desc,page,line,chr){ 
/* alert('JavaScript error occurred! \n' 
    +'\nError description: \t'+desc 
    +'\nPage address:  \t'+page 
    +'\nLine number:  \t'+line 
);*/ 
} 

$(function(){ 
$('a').focus(function(){this.blur();}); 
SI.Files.stylizeAll(); 
slider.init(); 

$('input.text-default').each(function(){ 
    $(this).attr('default',$(this).val()); 
}).focus(function(){ 
    if($(this).val()==$(this).attr('default')) 
    $(this).val(''); 
}).blur(function(){ 
    if($(this).val()=='') 
    $(this).val($(this).attr('default')); 
}); 

$('input.text,textarea.text').focus(function(){ 
    $(this).addClass('textfocus'); 
}).blur(function(){ 
    $(this).removeClass('textfocus'); 
}); 

var popopenobj=0,popopenaobj=null; 
$('a.popup').click(function(){ 
    var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]); 
    var pobj=$('#'+pid); 
    if(!pobj.length) 
    return false; 
    if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){ 
    popopenobj.hide(50); 
    $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open'); 
    popopenobj=null; 
    } 
    return false; 
}); 
$('p.images img').click(function(){ 
    var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0]; 
    $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)'); 

    $(this).parent().find('img').removeClass('on'); 
    $(this).addClass('on'); 
    return false; 
}); 
$(window).load(function(){ 
    $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;}); 
    $.each(css_cims,function(){ 
    var css_im=this; 
    $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){ 
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im; 
    }); 
    }); 
}); 
$('div.sc-large div.img:has(div.tml)').each(function(){ 
    $('div.tml',this).hide(); 
    $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({ 
    left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1 
    }).click(function(){ 
    $(this).siblings('div.tml').slideToggle(); 
    return false; 
    }).focus(function(){this.blur();}); 
}); 
}); 
var slider={ 
num:-1, 
cur:0, 
cr:[], 
al:null, 
at:10*450, 
ar:true, 
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)*1000)}); 
    $('#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+1; 
    if(next>=slider.num) 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)*950)},950,'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); 
} 
}; 
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07 
if(!window.SI){var SI={};}; 
SI.Files={ 
htmlClass:'SI-FILES-STYLIZED', 
fileClass:'file', 
wrapClass:'cabinet', 

fini:false, 
able:false, 
init:function(){ 
    this.fini=true; 
}, 
stylize:function(elem){ 
    if(!this.fini){this.init();}; 
    if(!this.able){return;}; 

    elem.parentNode.file=elem; 
    elem.parentNode.onmousemove=function(e){ 
    if(typeof e=='undefined') e=window.event; 
    if(typeof e.pageY=='undefined' && typeof e.clientX=='number' && document.documentElement){ 
    e.pageX=e.clientX+document.documentElement.scrollLeft; 
    e.pageY=e.clientY+document.documentElement.scrollTop; 
    }; 
    var ox=oy=0; 
    var elem=this; 
    if(elem.offsetParent){ 
    ox=elem.offsetLeft; 
    oy=elem.offsetTop; 
    while(elem=elem.offsetParent){ 
    ox+=elem.offsetLeft; 
    oy+=elem.offsetTop; 
    }; 
    }; 
    }; 
}, 
stylizeAll:function(){ 
    if(!this.fini){this.init();}; 
    if(!this.able){return;}; 
} 
}; 

回答

0

我測試腳本和實例,發現它不能循環回圖像一日起向滑動到左邊。因爲圖像從1-2-3-4-5-6-7從左到右排隊,每當它從圖像7滑到1時,它必須回到圖像1位置(CSS left:6000pxleft:0px)。如果您希望過渡效果滑向左側,則會有圖像1,並且位於圖像7的旁邊。圖像的位置將爲1-2-3-4-5-6-7- 1,這個代碼不能爲你做。

我建議你使用jQuery插件滑塊jCarousel Lite。它很容易使用許多真棒配置和circular完全是你需要的配置。希望你發現這個有用。問候。

相關問題