jQuery的設置間隔

Question

林製作幻燈片使用jQuery

如何我可以在兩個功能

例如之間設置間隔：

$('#slide').css('background-image', 'url(1.jpg)'); 
//sleep 5000 ms 
$('#slide').css('background-image', 'url(2.jpg)'); 

Answer 1

var counter= 0, 
     imgs = ['1.jpg', '2.jpg']; 

$('#slide').css('background-image', 'url('+ imgs[counter] +')'); 

setInterval(function(){ 
    counter++; 
    if(counter > imgs.length-1) counter = 0; 
    $('#slide').css('background-image', 'url('+ imgs[counter] +')'); 
}, 1000); 

Answer 2

你的代碼是非常效率不高。在您需要再次搜索#slide元素後，您會從DOM中獲得#slide，並獲得一行。它的速度更快，以獲得元素，並將其保存在一個變種AR東西：

$('#slide').css('background-image', 'url(1.jpg)').css('background-image', 'url(2.jpg)'); 

和Pause可以通過.delay(time)方法來完成：

$('#slide').css('background-image', 'url(1.jpg)') 
      .delay(1000) 
      .css('background-image', 'url(2.jpg)'); // 1000 ms = 1 s 

---

感謝耀西，.delay只有作品與.animate。所以我setTimeout試了一下：

var foo = $('#foo') 

foo.css('background', '#c33'); 

setTimeout(function() { 
    foo.css('background', '#33c'); 
}, 2000); // 2000ms = 1s 

活生生的例子：http://jsfiddle.net/fmzZ6/