图片轮播 -两种自动定时方式

方式一:

<script>
window.onload=load;
 function load(){
        var arrImgs=['1.jpg','2.jpg','3.jpg','4.jpg'];
        var img = document.getElementById("img");
        var  index =0;
        img.onclick=changeImg;//点击图片实现轮播
        setInterval(changeImg,500);//自动轮播图片方式1

    //轮播图片
     function changeImg(){
         if(index==arrImgs.length){
             index=0;
         }
         img.src = "images/"+arrImgs[index];//图片在images目录下
         index++;
     }
    }
</script>
</body>
<img src="images/photo_01.jpg" id="img" width="300" height="300" border="1px solid #f00">
</html>

　　

 

方式二:

<script>
window.onload=load;
 function load(){
        var arrImgs=['1.jpg','2.jpg','3.jpg','4.jpg'];
        var img = document.getElementById("img");
        var  index =0;
       showBySetOut();//自动轮播图片方式2

    //轮播图片
     function changeImg(){
         if(index==arrImgs.length){
             index=0;
         }
         img.src = "images/"+arrImgs[index];//图片在images目录下
         index++;
     }
    //通过setTimeout是实现自动定时
     function showBySetOut(){
         changeImg();
         setTimeout(showBySetOut,1000);
     }
    }
</script>
</body>
<img src="images/photo_01.jpg" id="img" width="300" height="300" border="1px solid #f00">
</html>