如何利用JavaScript开发网页banner切换（代码示例）

<!DOCTYPE html>
<html>
<head>
    <title>利用JavaScript开发网页banner切换</title>
    <style>
        .banner {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
         
        .banner img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
         
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
         
        .controls button {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="banner">
        <img id="image" src="images/1.jpg" alt="image">
    </div>
    <div class="controls">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
 
    <script>
	// 获取元素
	const image = document.getElementById("image");
	const prevBtn = document.getElementById("prev");
	const nextBtn = document.getElementById("next");
	 
	// 图片列表
	const images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];
	 
	// 当前显示的图片索引
	let currentIndex = 0;
	 
	// 切换到上一张图片
	prevBtn.addEventListener("click", () => {
		currentIndex--;
		if (currentIndex < 0) {
			currentIndex = images.length - 1;
		}
		image.src = images[currentIndex];
	});
	 
	// 切换到下一张图片
	nextBtn.addEventListener("click", () => {
		currentIndex++;
		if (currentIndex >= images.length) {
			currentIndex = 0;
		}
		image.src = images[currentIndex];
	});
    </script>
</body>
</html>

标签： banner切换

上面是“如何利用JavaScript开发网页banner切换（代码示例）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_12819.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！