通过js实现轮播图

思路：

1.创建一个String数组，存放图片url

2.动态改变img元素的src

JavaScript代码：

    //图片的url
    let imgs=["img/cat.jpeg", "img/bg.jpeg", "img/left-bg1.jpg", 'img/left-bg2.jpg'];
    let isPause=false;//轮播是否暂停的状态标记
    let view;//显示图片的元素
    let interval;//时间间隔事件
    self.onload=function (a) {//当页面的元素加载完成后再设置轮播事件
        view=document.getElementById('img');//获取元素
        interval=setInterval(finished,1000)//设置每隔1秒向消息队列发送轮播事件
    };
    let current_index=0;//设置当前的图片索引
    //轮播事件
    function finished() {
        if (isPause){
            return
        }
        if (current_index>=imgs.length) {
            current_index=0;
        }
        view.src = imgs[current_index];
        current_index++;
    }
    //实现手动点击显示下一个图片的事件
    function next_btn() {
        isPause=true;
        clearInterval(interval);
        if (current_index>=imgs.length)
            current_index=0;
        view.src=imgs[current_index];
        current_index++;
        isPause=false;
        interval=setInterval(finished,1000);
    }
//重写元素的onmouseover事件，实现鼠标放到元素上面时的操作
    function mOver(view) {
        isPause=true;
    }
//重写元素的onmouseout事件，实现鼠标离开元素上面时的操作
    function mOut(view) {
        isPause=false;
    }

HTML代码：

<div>
    <img src="img/cat.jpeg" id="img" onmouseover="mOver(this)" onmouseout="mOut(this)">
    <button id="next_btn" onclick="next_btn()">
        下一张
    </button>
</div>

注意：修改点击事件（next_btn）可以实现直接选择任意一张图片，逻辑很相近，这里就不在写了。