onload setInterval for carousel

Question

我在亂搞，從零開始做一個簡單的輪播。起初，我用onclick="function()"通過圖像切換，那麼我想轉出來爲onload="setInterval(function, 4000)"，但似乎已經打破東西...

下面是HTML：

<div id="carousel"> 
    <div class="carousel-image" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">1</div> 
    <div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">2</div> 
    <div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">3</div> 
    <div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">4</div> 
    <div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">5</div> 
    <div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">6</div> 
</div> 

這裏是腳本：

<script> 
     var arr = 0; 
     function newImage(el){ 
      var images = document.getElementById('carousel').children; 
      for (var i = 0; i < images.length; i++){ 
       images[i].className = "carousel-image-off"; 
      } if (arr < images.length-1){ 
       arr++; 
       images[arr].className = "carousel-image"; 
      } else { 
       arr = 0; 
       images[arr].className = "carousel-image"; 
      } 
     } 
</script> 

Answer 1

我簡化了一點點，改了一些東西。

HTML

<div id="carousel"> 
    <div class="carousel-image active"><img src="http://placehold.it/350x150">1</div> 
    <div class="carousel-image"><img src="http://placehold.it/350x150">2</div> 
    <div class="carousel-image"><img src="http://placehold.it/350x150">3</div> 
    <div class="carousel-image"><img src="http://placehold.it/350x150">4</div> 
    <div class="carousel-image"><img src="http://placehold.it/350x150">5</div> 
    <div class="carousel-image"><img src="http://placehold.it/350x150">6</div> 
</div> 

CSS

.carousel-image { 
    display:none; 
} 
.carousel-image.active { 
    display:inline; 
} 

的JavaScript

function newImage() { 
    var images = document.getElementsByClassName('carousel-image'); 
    for(var i = 0; i < images.length; i++) { 
     if(images[i].className.match('active')) 
     { 
      images[i].classList.remove('active'); 
      if(i >= images.length-1) 
      { 
       images[0].classList.add('active'); 
      } 
      else 
      { 
       images[i+1].classList.add('active'); 
      } 
      break; 
     } 
    } 
} 

setInterval(
    newImage, 
    1000 
); 

的jsfiddle

http://jsfiddle.net/nasd0ska/2/

注意

如果我是你，我會使用jQuery。操作DOM非常簡單方便！