JS——图片轮播（淡入淡出）

最新推荐文章于 2023-04-25 15:27:41 发布

spfLinux

最新推荐文章于 2023-04-25 15:27:41 发布

阅读量1.1k

点赞数 1

分类专栏： js css 文章标签： JS 图片轮播淡入淡出

js 同时被 2 个专栏收录

137 篇文章 3 订阅

订阅专栏

css

45 篇文章 0 订阅

订阅专栏

<!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>

spfLinux

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS——图片轮播（淡入淡出）

Document #slider { /* position: absolute; top: 100px; left: 30%; */ width: 200px; height: 150px; border: 1px solid blue; } #slider>img { position: absolute; top: 100px; left: 3
复制链接

扫一扫