2011-09-02 82 views
0

我有一些代碼生成prev/next按鈕,並將使用兩個函數nextPhoto和prevPhoto在一組圖像中循環。我想知道是否有人可以幫我把這段代碼變成自動幻燈片?jquery幫助需要 - 創建自動幻燈片

這裏是我的代碼:

$max = 8; 
$current = 1 
function nextPhoto() { 
    if ($current != $max) { 
    $('.slider'+($current)+'').hide(); 
    $('.slider'+($current+1)+'').show(); 
    $('.slider'+($current+1)+'').css('left', '20%'); 
    $('.slider'+($current+1)+'').animate({left:'0%'}, {duration:500, easing:"easeOutExpo", queue:false}); 
    resizeImages(); 
    $current++; 
    } 
    if ($current == 2) { 
    $('#background .left').animate({left:'0px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    } 
    if ($current == $max) { 
    $('#background .right').animate({right:'-85px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    setInterval("restartSlider()", 5000); 
    } 
} 
function prevPhoto() { 
    resizeImages(); 
    if ($current != 1) { 
    $('.slider'+($current)+'').hide(); 
    $('.slider'+($current-1)+'').show(); 
    $('.slider'+($current-1)+'').css('left', '-20%'); 
    $('.slider'+($current-1)+'').animate({left:'0%'}, {duration:500, easing:"easeOutExpo", queue:false}); 
    resizeImages(); 
    $current --; 
    } 
    if ($current == 1) { 
    $('#background .left').animate({left:'-85px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    } 
    if ($current == $max-1) { 
    $('#background .right').animate({right:'0px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    } 
} 

$('.right').mouseup(function(){ 
    nextPhoto(); 
}) 
$('.left').mouseup(function(){ 
    prevPhoto(); 
}) 

回答

1

我會建議你使用已有的和廣泛使用插件這個jQuery cycle而不是寫你自己的。看看它提供了很多功能。我相信它一定會幫助你。

+0

星爺這是一個全尺寸的背景滑塊..它會調整取決於烏爾屏幕水庫。 – SoulieBaby

+0

我明白了,你能爲你的問題創建一個小提琴嗎? – ShankarSangoli

+0

我從來沒有使用過,但網址是http://icta.website.2011.360southclients.com/home.html如果你想看看我想要做什麼? – SoulieBaby

1

假設你的nextPhoto()和prevPhoto()方法正在工作,我只需設置一個定時器的時間間隔。

var delay = 5000; //5 seconds 
var timer = window.setInterval('nextPhoto()', delay); 

,並阻止它

clearInterval(timer);