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和一行。获取元素并将其保存在变量中更快：

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

可以通过.delay( time )方法暂停：

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

感谢Yoshi，.delay仅适用于.animate。所以我尝试了setTimeout：

var foo = $('#foo')

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

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

实例：http://jsfiddle.net/fmzZ6/

Jquery如何设置间隔

2 个答案: