使用数组封装图片实现轮播图

　　下列实例是将轮播图所需要的图片封装在一个数组里，通过遍历实现图片的循环播放，并通过setInterval函数控制时间间隔。

HTML布局如下：

<body onload="imagechange()">
    <!--承载图片的DIV并试着第一张图片-->
    <div class="div1">
        <img id="imagescroll" src="images/1.jpg"/>
    </div>
</body>

CSS布局如下：

.div1{
                margin: 50px auto;
                width: 80%;
                height:300px;
                text-align: center;
            }
 
            #imagescroll{
                width: 534px;
                height: 300px;
            }

JS代码如下：

function imagechange(){
    //获取承载图片的元素
    var imagecontrol=document.getElementById("imagescroll");
    //把所有的图片封装在一个数组中
    var imageArr =["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];
    var index=0;
    //通过setInterval函数每隔2秒改变一下图片，注意该函数的使用方法
    setInterval(function(){
        //获取当前图片的编号
        var i =index;
        //如果超过最大编号，则回滚到第一张图片
        if(i>=imageArr.length){
            index=0;
            i=0;
        }
        //设置背景图片
        imagecontrol.src=imageArr[i];
        index=index+1;
    },2000);
}