我们平时在逛购物网站的时候会看到页面内的商品图片自动轮播，二要想实现着中效果应该如何做呢？下面详细讲解代码的运用，实现下面视频的效果。大家也可以自己试试看，或者复制最后的完整代码运行一下！
图片自动轮播效果
要实现主动轮播效果需要用到的内容有：CSS样式设置、CSS样式布局、获取节点、解决高度塌陷问题、键盘监听事件，不清楚的可以点击文字跳转相应博客学习。
一、整体结构
1、设置一个div容器用于显示图片的区域
设置相对定位和固定宽度，这使用到了CSS页面布局的内容，利用百分比设置图片的位置，为了方便观看，我给这个容器设置了边框。
<head>
<style>.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 */ }
</style>
</head><body>
<div class="carousel-container"> <img src="./img_src/p1.jpg" class="carousel-image" id="img1"> </div>
</body>
代码运行效果如上图，大家可以根据实际需求调整大小、样式等内容。
2、设置图片按钮切换区域
这里我使用四个<p>元素设置，在后面将该元素假设为切换图片的按钮
<head><style>.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;}</style></head><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键可以停止轮播，要设置一个区域显示图片轮播的状态信息，如“图片轮播关闭……”，通过绝对定位放置在页面特定位置，有红色背景、白色文本和边框半径。
<head><style>#output { color: white;background-color: red; text-align: center;width: 50%; height: 3%; margin-top: 1%; position: relative;left: 5%; border-radius: 10px;} </style></head><body><div id="output">图片轮播关闭......(按Enter键开启轮播)</div></body>效果图如下：
这样一个基本的框架就已经出来了
二、实现各种效果
实现这些效果，我利用JS来实现
1、实现主动轮播
（1）获取图片元素和初始化变量，获取id为img1的图片元素
const imgElement = document.getElementById("img1"); （2）定义变量scroll_img并初始化为false，用于控制自动轮播的开启和关闭状态，定义一个自动轮播的函数，当showNextImage1函数在scroll_img为true时执行图片切换逻辑
var i = 1;var scroll_img = false;function showNextImage1() { if(scroll_img){if(i>4){i = 1;}else{ imgElement.src = `./img_src/p${i}.jpg`;i = i + 1;} }} setInterval(showNextImage1, 1000); 其中，如果 i 大于 4，将 i 重置为 1，实现循环切换。否则，根据当前的 i 值设置图片元素的 src 属性为 ./img_src/p${i}.jpg，然后 i 的值加 1，切换到下一张图片。
2、实现四个按钮切换图片
（1）在前面说到要假设<p>元素为按钮，我们就要先获取该元素
const p = document.getElementsByTagName("p");（2）为四个按钮添加事件监听
p[0].addEventListener("click",function(){i = 1;imgElement.src = `./img_src/p${i}.jpg`;})当第一个 <p> 元素被点击时，将 i 设置为 1，并将图片元素的 src 属性设置为第一张图片的路径。 同理，当第二、三、四个 <p> 元素被点击时，分别将 i 设置为 2、3、4，并设置相应的图片路径。
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、实现点击Enter键控制轮播是否开启
（1）与前面一致，先获取显示提示信息的元素
const outputDiv = document.getElementById('output');（2）添加键盘按下的监听事件
document.addEventListener('keydown', // 监听整个文档的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";}});（3）根据 scroll_img 的值来设置提示信息和背景颜色。（代码结合在（2）里面）
如果 scroll_img 为 true，表示图片轮播开启，将输出区域的文本内容设置为“图片轮播开启......(按 Enter 键关闭轮播)”，并将背景颜色设置为绿色。
如果 scroll_img 为 false，表示图片轮播关闭，将输出区域的文本内容设置为“图片轮播关闭......(按 Enter 键开启轮播)”，并将背景颜色设置为红色。
利用这些代码即可实现图片自动轮播的效果，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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>三、总结
这段代码通过合理的变量定义、函数封装和事件监听，实现了一个较为完整的图片切换和控制功能。自动轮播和手动切换功能相互独立又可以协同工作，而回车键控制轮播状态的功能增加了用户交互的灵活性，同时通过提示信息的显示，让用户能够清楚地了解当前轮播的状态。
![[全网最细数据结构完整版]第七篇:3分钟带你吃透队列](https://i-blog.csdnimg.cn/direct/504733d4072a4ad7a935c85546836abe.jpeg)
