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

时间 2019-11-21

原文原文链接

　　下列实例是将轮播图所须要的图片封装在一个数组里，经过遍历实现图片的循环播放，并经过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代码以下：spa

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);
}