Question

我编写了这段代码，所以每次点击一个按钮时，div的背景都会改变2次：

$("#auto").click(function() {
        setTimeout(function(){
             $('#screen').css('background-image','url(./img/2.jpg)');
                }, 400);
        setTimeout(function(){
             $('#screen').css('background-image','url(./img/3.jpg)');
                }, 800);
    });

但是，如果我们有很多图片，应该有一个更聪明的方法来做，而不重复功能。你们能帮助我吗？

我知道将图片放在div中，但代码我一次只能更改一张图片。如何以1秒的间隔显示所有这些图片？

<div class="slides">
        <div><img src="img/0.jpg" ></div>
        <div><img src="img/1.jpg" ></div>
        <div><img src="img/2.jpg" ></div>
        <div><img src="img/3.jpg" ></div>
        <div><img src="img/4.jpg" ></div>   
        <div><img src="img/5.jpg" ></div> 
</div>

var slider = $('.slides div');
    var intervalHandler = null;
    slider.hide();
    slider.eq(0).show();
    clickCount = 0;

$("#auto").click(function(){
          clearInterval(intervalHandler);
          intervalHandler = setInterval(function(){$(".SlNextBT").click();},1000);
         if(clickCount < slider.length)
               slider.eq(clickCount++).hide();
         if(clickCount == slider.length)
             clickCount = 0;
          slider.eq(clickCount).show();
     }) ;

Answer 1

应该很容易使这更通用，并且能够容纳大量图片而无需对每个图片进行硬编码。从0循环到图像数量，将计数器变量乘以您希望每个图像在setTimeout调用中显示的时间长度，并动态构建图像URL（因为它是数字）。

function changeImage(index) {
   return function() {
      var currentImage = './img/'+(index+1)+'.jpg';
      $('#screen').css('background-image','url('+currentImage+')');
   }
}

$("#auto").click(function() {
    // let's say you have 5 pictures
    var numberOfPictures = 5;
    // 1 second
    var waitPeriod = 1000;

    for (var i = 0; i < numberOfPictures; i++) {
        setTimeout(changeImage(i), i * waitPeriod);
    }
});

使用jquery多次更改图像

1 个答案: