Question

我编写的代码每3秒使用循环更改一次图像，问题是循环速度太快，以至于图片跳转到最后一张图片而不是一张一张。这可以轻松解决吗？

代码是：

<form id="form1" runat="server">
  <div>
    <img src="Images/london.jpg" id="london" height="450" width="450" /> <input type="button" onclick="changeTimer()" value="Start" />
  </div>
</form>
<script>
  function changeTimer() {
    setInterval(function () { changeImage() }, 3000);
  }
  var pictures = new Array("Images/moscow.jpg", "Images/pariz.jpg", "Images/Roma.jpg");
  var i;

  function changeImage() {
    for (i = 0; i < 3; i++) {
        document.getElementById("london").src = pictures[i];
    }
  }
</script>

Answer 1

尝试

var i=0;

和

function changeImage() {         
            document.getElementById("london").src = pictures[i];
            i = (i==pictures.length-1) ? 0 : i++; 
    }

Answer 2

这段代码没问题！

function changeTimer() {
    setInterval(function () { changeImage() }, 3000);
}
var pictures = new Array("Images/moscow.jpg", "Images/pariz.jpg", "Images/Roma.jpg");
var i=0;
function changeImage() {
    document.getElementById("london").src = pictures[i];
    i = (i+1)%3;
}

Answer 3

试试这段代码

<form id="form1" runat="server">
    <div>
        <img src="Images/london.jpg" id="london" height="450" width="450" /> <input type="button" onclick="changeTimer()" value="Start" />
    </div>
</form>


 <script>
    var i=0;
    function changeTimer() {
        setInterval(function() {
            changeImage()
        }, 3000);
    }
    var pictures = new Array("Images/moscow.jpg", "Images/pariz.jpg", "Images/Roma.jpg");


    function changeImage() {

        document.getElementById("london").src = pictures[i];
        i++;
        if (i == 3) {
            i = 0;
        }

    }
</script>

Answer 4

另一种可能的解决方案：

function rotateImages() {
    var i = 0;
    setInterval(function () { 
        document.getElementById("london").src = pictures[i++];
        i = (i == pictures.length) ? 0 : i;
    }, 3000);
}

这是fiddle

setInterval使用循环

4 个答案: