JS实现轮播图，并添加渐隐渐显效果

最新推荐文章于 2022-03-09 08:36:26 发布

原创最新推荐文章于 2022-03-09 08:36:26 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

本文介绍了一种使用JavaScript实现的轮播图效果，通过调整图片的透明度实现渐隐渐现的视觉效果，提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS实现轮播图，并添加渐隐渐显效果

尝试用js实现轮播图，再添加上渐隐渐显效果，虽然有效果，不过代码写的比较乱

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>轮播图</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		.banner {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: absolute;
		}
		.img {
			width: 100%;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="banner" style="z-index: 3">
            <!--必应的图片链接-->
			<img src="https://cn.bing.com/th?id=OHR.TorontoSky_ZH-CN6932705886_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp" class="img" alt="">
		</div>
		<div class="banner" style="z-index: 2">
			<img src="https://cn.bing.com/th?id=OHR.BeardedReedling_ZH-CN7714158275_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp" class="img" alt="">
		</div>
		<div class="banner" style="z-index: 1">
			<img src="https://cn.bing.com/th?id=OHR.LongIsland_ZH-CN7089248815_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp" class="img" alt="">
		</div>
	</div>
	<script>
		function id(id) {
			return document.getElementById(id)
		}
		function cl(dcmt,cl) {
			return dcmt.getElementsByTagName(cl)
		}

		var banLen = 0;
		var container = id("container");
		var divs = cl(container,"div");
        var divLen = divs.length;
        var rule = divs.length - 2;
		
		setInterval( function () {
			banLen += 1;
			if (banLen == divLen) {
				banLen = 0
			}
			for (var i = 0; i <= divs.length - 1; i++) {
				divs[i].style.zIndex = 1;
				for (var j = 0;j <= divs.length; j++) {
					divs[banLen].style.opacity = 0;
					divs[banLen].style.zIndex = 5;
          if (banLen == rule) {
            divs[divLen - 1].style.zIndex = -3;
          }
					time();
				}
			}
		}, 5000)//5000，图片轮播间隔为5秒

		function time() {
			var opacity = 0;
			var amtTimer = setInterval(animate,50);
			//50，每增加一层渐显效果所用时间，
			function animate() {
				if (opacity > 1) {
					clearInterval(amtTimer);
				} else {
					opacity += 0.025;//0.025，渐显效果过渡值
					divs[banLen].style.opacity = opacity;
				}
			}
		}
	</script>
</body>
</html>