我们经常会看到购物网页上有商品图片在自动循环播放，这就是图片轮播，图片轮播是一种常见的网页设计元素，用于在网页上自动切换显示多张图片或内容。它通过JavaScript来实现图片的自动轮播效果，结合HTML和CSS来完成布局和样式设置。如下效果：
20241110_150122
以上就是图片轮播的效果，下面详细讲解代码的运用，实现上面视频的效果。大家也可以自己试试看，或者复制最后完整代码试试吧！
一、HTML部分
在HTML中创建一个包含轮播图的容器，通常使用<div>元素，并为其添加一个唯一的ID。
1、设置一个div容器用于显示图片的区域
<body> <div class="carousel-container"> <img src="./img_src/p1.jpg" class="carousel-image" id="img1"> </div>
</body>2、设置图片按钮切换区域
<body> <div class="clear_ele change-image"><p class="button" id="p1">第1张</p><p class="button" id="p2">第2张</p><p class="button" id="p3">第3张</p><p class="button" id="p4">第4张</p> </div>
</body>3、设置提示信息区域
为了让用户可以知道点击Enter键可以停止轮播，要设置一个区域显示图片轮播的状态信息。
<body> <div id="output">图片轮播关闭......(按Enter键开启轮播)</div></body>HTML部分基本结构就完成了，代码如下：
<body> <div class="carousel-container"> <img src="./img_src/p1.jpg" class="carousel-image" id="img1"> </div> <div class="clear_ele change-image"><p class="button" id="p1">第1张</p><p class="button" id="p2">第2张</p><p class="button" id="p3">第3张</p><p class="button" id="p4">第4张</p> </div><div id="output">图片轮播关闭......(按Enter键开启轮播)</div></script>
</body>二、CSS样式
通过CSS对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式。
代码如下：
<style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; } .carousel-container { position: relative; width: 50%; height:55%; /* 根据需要设置高度 */ border: 4px red solid;background-color: gray;} .carousel-container .carousel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; /* 不透明度0-1 */ } .change-image{width: 15%; height: 3%; /* border: 1px purple solid; */position: absolute;top: 30%;left: 5%;}.change-image .button{ width: 60px; height: 30px;color: white;text-align: center;background-color: red;border-radius: 10px;margin-left: 9px;float: left;}#output { color: white;background-color: red; text-align: center;width: 20%; height: 3%; margin-top: 1%; position: relative;left: 5%; border-radius: 10px;} .clear_ele::after{content: ""; /* 这个伪元素的内容属性必须有 */display: block;/* border: 6px purple dashed; */clear: both;} 效果如下：
三、JavaScript代码
使用JavaScript来实现轮播图的功能。
1、实现主动轮播
（1）获取图片元素和初始化变量，获取id为img1的图片元素
const imgElement = document.getElementById("img1"); （2）定义自动切换图片的函数。定义变量scroll_img并初始化为false，用于控制自动轮播的开启和关闭状态，定义一个自动轮播的函数，当showNextImage1函数在scroll_img为true时执行图片切换逻辑
function showNextImage1() { if(scroll_img){if(i>4){i = 1;}else{ imgElement.src = `./img_src/p${i}.jpg`;i = i + 1;} }} 其中，如果 i 大于 4，将 i 重置为 1，实现循环切换。否则，根据当前的 i 值设置图片元素的 src 属性为 ./img_src/p${i}.jpg，然后 i 的值加 1，切换到下一张图片。
（3）设置每1秒切换一次图片 （无限循环）
setInterval(showNextImage1, 500);2、实现四个按钮切换图片
（1）获取元素
const p = document.getElementsByTagName("p");（2）为四个按钮添加事件监听， click：单击鼠标时触发
p[0].addEventListener("click",function(){i = 1;imgElement.src = `./img_src/p${i}.jpg`;})p[1].addEventListener("click",function(){i = 2;imgElement.src = `./img_src/p${i}.jpg`;})p[2].addEventListener("click",function(){i = 3;imgElement.src = `./img_src/p${i}.jpg`;})p[3].addEventListener("click",function(){i = 4;imgElement.src = `./img_src/p${i}.jpg`;})3、实现回车键控制轮播是否开启
（1）获取显示提示信息的元素
const outputDiv = document.getElementById('output'); （2）添加键盘按下事件监听
document.addEventListener('keydown', function(event) { const keyCode = event.key; if(keyCode==="Enter"){scroll_img = !scroll_img; } if (scroll_img) {outputDiv.textContent = "图片轮播开启......(按Enter键关闭轮播)";outputDiv.style.backgroundColor = "green";} else {outputDiv.textContent = "图片轮播关闭......(按Enter键开启轮播)";outputDiv.style.backgroundColor = "red";}}把以上全部代码结合在一起，就能实现简单的图片轮播，代码如下：（快复制代码试试吧）
<!DOCTYPE html>
<html lang="en">
<head> <title>图片自动切换（轮播图效果）</title> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; } .carousel-container { position: relative; width: 50%; height:55%; /* 根据需要设置高度 */ border: 4px red solid;background-color: gray;} .carousel-container .carousel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; /* 不透明度0-1 */ } .change-image{width: 15%; height: 3%; /* border: 1px purple solid; */position: absolute;top: 30%;left: 5%;}.change-image .button{ width: 60px; height: 30px;color: white;text-align: center;background-color: red;border-radius: 10px;margin-left: 9px;float: left;}#output { color: white;background-color: red; text-align: center;width: 20%; height: 3%; margin-top: 1%; position: relative;left: 5%; border-radius: 10px;} .clear_ele::after{content: ""; /* 这个伪元素的内容属性必须有 */display: block;/* border: 6px purple dashed; */clear: both;}</style>
</head>
<body> <div class="carousel-container"> <img src="./img_src/p1.jpg" class="carousel-image" id="img1"> </div> <div class="clear_ele change-image"><p class="button" id="p1">第1张</p><p class="button" id="p2">第2张</p><p class="button" id="p3">第3张</p><p class="button" id="p4">第4张</p> </div><div id="output">图片轮播关闭......(按Enter键开启轮播)</div><script> // 【实现自动轮播】//1、获取图片元素和初始化变量，获取id为img1的图片元素const imgElement = document.getElementById("img1"); //1为当前显示的图片序号var i = 1;var scroll_img = false;//2、定义自动切换图片的函数function showNextImage1() { if(scroll_img){if(i>4){i = 1;}else{ imgElement.src = `./img_src/p${i}.jpg`;i = i + 1;} }} // 每1秒切换一次图片 （无限循环）setInterval(showNextImage1, 500); // 【实现四个按钮切换图片】const p = document.getElementsByTagName("p");//为四个按钮添加事件监听p[0].addEventListener("click",function(){i = 1;imgElement.src = `./img_src/p${i}.jpg`;})p[1].addEventListener("click",function(){i = 2;imgElement.src = `./img_src/p${i}.jpg`;})p[2].addEventListener("click",function(){i = 3;imgElement.src = `./img_src/p${i}.jpg`;})p[3].addEventListener("click",function(){i = 4;imgElement.src = `./img_src/p${i}.jpg`;})// 【实现回车键控制轮播是否开启】 //1、获取显示提示信息的元素const outputDiv = document.getElementById('output'); //2、添加键盘按下事件监听document.addEventListener('keydown', function(event) { const keyCode = event.key; if(keyCode==="Enter"){scroll_img = !scroll_img; } if (scroll_img) {outputDiv.textContent = "图片轮播开启......(按Enter键关闭轮播)";outputDiv.style.backgroundColor = "green";} else {outputDiv.textContent = "图片轮播关闭......(按Enter键开启轮播)";outputDiv.style.backgroundColor = "red";}});</script>
</body>
</html>
