图片轮播，淡入淡出(js,css)

最新推荐文章于 2024-06-29 22:20:55 发布

原创最新推荐文章于 2024-06-29 22:20:55 发布 · 612 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS #JS 图片轮播淡入淡出

js 同时被 2 个专栏收录

137 篇文章

订阅专栏

css

44 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的轮播图效果，通过JavaScript控制图片的显示与隐藏，实现平滑过渡。文章详细解释了如何利用CSS选择器设置图片的透明度和定位，并介绍了nextElementSibling属性用于获取DOM元素的下一个兄弟元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1>img {
			position: absolute;
			opacity: 0;
			transition: all .5s linear;
		}
		#d1>img.show { /* 这里必须用#d1>img，不然优先级不够 */
			z-index: 10; /* 必须用z-index:10;不然后面的图片覆盖前面的 */
			opacity: 1;
		}
	</style>
</head>
<body>
	<div id="d1">
		<img src="img/banner1.png" alt="" class="show">
		<img src="img/banner2.png" alt="">
		<img src="img/banner3.png" alt="">
		<img src="img/banner4.png" alt="">
	</div>

	<script>
		
		function task() {
			var img = document.querySelector(".show");
			img.className = "";
			//console.log(img.nextSibling);
			//console.log(img.nextElementSibling);
			  if(img.nextElementSibling!=null){
				img.nextElementSibling.className="show";
			}else{
				document.querySelector("#d1>:first-child").className="show";
			}
		}
		var timer = setInterval("task()",1000);

		d1.onmouseover = function() {
			clearInterval(timer);
			timer=null;
		}

		d1.onmouseout = function() {
			timer = setInterval("task()",1000); //这里前面不能加var，不然就会新建一个定时器，造成图片轮播切换混乱
		}
	</script>
</body>
</html>

里面尤需注意的是：nextSibling和nextElementSibling的区别，nextSibling是指下一个兄弟节点，nextElementSibling是指下一个兄弟元素。