思路:
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)可以实现直接选择任意一张图片,逻辑很相近,这里就不在写了。