|
JavaScript onclick怎么实现点击切换图片且自动播放
发布时间：2022-01-12 17:45:37
来源：亿速云
阅读：78
作者：iii
栏目：开发技术
这篇文章主要介绍“JavaScript onclick怎么实现点击切换图片且自动播放”，在日常操作中，相信很多人在JavaScript onclick怎么实现点击切换图片且自动播放问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript onclick怎么实现点击切换图片且自动播放”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！ 下面是完整的代码：
//给四个button加上点击事件
上一张
下一张
自动播放
停止播放
//获取这个img
var img = document.getElementById("img");
//设置一个变量，负责切换图片，作为索引值
var index = 0;
//设置一个变量来存储定时器的返回值
var t = null;
//定义一个数组来存储照片的地址
var imgPath = ["./img/0.webp", "./img/1.webp", "./img/2.webp", "./img/3.webp", "./img/4.webp", "./img/5.webp", "./img/6.webp", "./img/7.webp", "./img/8.webp"]
//下一张
function changeImg() {
//我们用三目运算符
index = index>=(imgPath.length-1)?0:++index;
img.src = imgPath[index];
// 或者是if判断
// if (index>=imgPath.length-1){
// index=0;
// img.src = `${imgPath[index]}`;
// } else {
// index++;
// img.src = `${imgPath[index]}`
// }
}
//上一张
function changeImg1() {
//同上
index= index 0 && index |