<style>
div {
width: 300px;
margin: 20px auto;
}
img {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="./img/sign1.jpg" alt="" />
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>
<script>
let imgarr = ["./img/sign1.jpg", "./img/sign2.jpg", "./img/sign3.jpg"];
let ele = document.querySelector("img");
let prev = document.querySelector(".prev");
let next = document.querySelector(".next");
let timer = null;
let index = 0;
function myfun11() {
timer = setInterval(() => {
console.log(index,111);
if (index > imgarr.length-1) {
index = 0;
}
ele.src = imgarr[index];
index++;
}, 1000);
}
myfun11();
ele.onmouseenter = function () {
clearInterval(timer);
};
ele.onmouseleave = function () {
myfun11();
};
// 上一张
// 0的上一张是2
// 1的上一张是0
// 2的上一张是1
prev.onclick = function () {
console.log("myindex", index);
if (index <= 0) {
index = imgarr.length - 1;
} else {
index--;
}
};
// 下一张
next.onclick = function () {
console.log("myindex", index);
if (index < imgarr.length) {
index++;
} else {
index = 0;
}
};
</script>
1126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
