<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#slider {
/* position: absolute; top: 100px; left: 30%; */
width: 200px;
height: 150px;
border: 1px solid blue;
}
#slider>img {
position: absolute; top: 100px; left: 30%;
opacity: 0;
transition: all .5s linear;
width: 200px;
height: 150px;
}
#slider>img.show {
opacity: 1;
z-index: 10; /* 否则是最底下一张 btn点击 alert alt*/
}
</style>
</head>
<body>
<div id="slider">
<img src="img/1.jpg" class="show" alt="1111">
<img src="img/2.jpg" alt="2222">
<img src="img/3.jpg" alt="3333">
</div>
<script>
var btns = document.querySelectorAll("#slider>img");
console.log(btns);
for(var btn of btns)
btn.οnclick=e=>alert(e.target.alt);
function task() {
var img = document.querySelector("#slider>.show");
img.className = "";
if(img.nextElementSibling != null)
img.nextElementSibling.className = "show";
else
document.querySelector(
"#slider>:first-child"
).className="show";
}
var timer = setInterval(task,3000);
var slider = document.getElementById("slider");
slider.οnmοuseοver=()=>{
clearInterval(timer);
timer=null;
}
slider.οnmοuseοut=()=>{
timer=setInterval(task,3000);
}
</script>
</body>
</html>
JS——图片轮播(淡入淡出)
最新推荐文章于 2024-06-29 22:20:55 发布