2012-06-18 87 views
0

我有一個畫廊,不能與setTimeout正常工作。 我需要讓畫廊每隔幾秒更換一張照片。但如果我按下指示器,那麼我希望它手動更改它。setTimeout Jquery畫廊不工作

這是我的js文件:

var arrayPic = ["/img/gallery/gal1.jpg", 
       "/img/gallery/gal2.jpg", 
       "/img/gallery/gal3.jpg", 
       "/img/gallery/gal4.jpg", 
       "/img/gallery/gal5.jpg", 
       "/img/gallery/gal6.jpg"]; 
var counter = 0; 
var waitTime = 5000; 
var transitionTime = 500; 
var t; 
var time_is_on = 0; 

$(document).ready(function() { 


    t = setTimeout(function() { 

     changeThisPhoto(); 
     changeIndicator(); 

    }, 1000); 

    $(".countrydd").ykDropdown(); 
    $(".subjectdd").ykDropdown(); 

}); 


function stopTime() { 

    clearTimeout(t); 
    time_is_on = 0; 
} 


function changeDefaultIndicator() { 

    console.log($("li.active")); 
    var thisChild = ($("li.active").index(this)) + 1; 

    for (var i = 0; i < arrayPic.length; i++) { 
     $("#indi" + i).removeClass(); 
    } 

    $("#indi" + thisChild).addClass("active"); 



} 

function changeIndicator() { 

    $(".indicatorslist li").bind("click", function() { 

     var thisChild = ($(".indicatorslist li").index(this)) + 1; 

     for (var i = 0; i < arrayPic.length; i++) { 
      $("#indi" + i).removeClass(); 
     } 

     $("#indi" + thisChild).addClass("active"); 

     changeThisPhoto(thisChild); 

    }) 

} 


function animatePhotoOut() { 

    $(".backgroundImage").animate({ 

     opacity: 1 

    }, transitionTime, function() { 
     $(".backgroundImage").delay(waitTime); 
     changeThisPhoto(); 

    }) 

} 

function changeThisPhoto(child) { 

    var stepper = 0; 

    if (!child) { 
     child = -1; 
    } 


    $(".backgroundImage").stop().animate({ 
     opacity: 0 
    }, transitionTime, function() { 


     if (counter == 5) { 
      counter = 0; 
     } else { 
      counter++; 
     } 

     if (child = -1) { 
      stepper = counter; 
     } 
     else { 
      stepper = child; 
     } 

     $(".backgroundImage").css("background-image", 
            "url('" + arrayPic[stepper] + "')"); 

     changeDefaultIndicator(); 
     animatePhotoOut(); 
    }) 
} 

它精美的作品,當我點擊的指標,但不會與的setTimeout()函數可能工作......

+0

注意:它是'setTimeout'小寫的「o」 - 也許你已經知道,因爲你在代碼中已經知道它,但在你的問題文本中它是'setTimeOut'(所以我修復了它)。 – nnnnnn

回答

1

setTimeout只會運行一次。改爲使用setInterval

+0

值得一提:http://www.erichynds.com/javascript/a-recursive-settimeout-pattern/ – Johan

+0

@Johan:嗯,也許不是這種情況,因爲沒有可能導致錯誤或網絡延遲的請求。 – Guffa