利用JS实现简单的轮播图

希望能帮到才加入程序员行列的小白~

首先，1.先分析轮播图是如何转换的？

实际上，即标签名中“src”值的改变

<img src="">

2.其次，分析如何使其改变？

利用数组和定时器实现跳转

代码部分：

HTML：

<div id="banner" style="width:660px;height: 410px;margin: 0 auto;">
        <img style="width: 660px;height: 410px;" src="img/1.jpg" alt="">
</div>

JavaSript:

var div =   document.getElementById("banner");
window.onload=function(){
    //定义图片名称的数组
    var imgs=["1.jpg","2.jpg","3.jpg","4.jpg"];
    //定义一个变量用来表示数组的下标
    var number=0;
    //定义定时器 每隔4秒转换 更改路径实现转换  setInterval(function(){},时间)-->定时器
    this.setInterval(function(){
        number++;//自增，增加下标数，改变图片的下标，达到图片的轮播
        if(number>2){//当下标数达到最大值时，重新从第一张照片开始
            number=0;//让下标等于0继续自增
        }
        div.firstElementChild.setAttribute("src","img/"+imgs[number]);
    },4000);
}

由此完成整个简单轮播图的运行~

代码的产生，其实是程序员在大脑中率先给出的初步构想和思考，经过加工处理后的产物。