学习了DOM操作和事件监听后，我们来做一下综合练习
做出和下图一样的轮播效果：
屏幕录制 2024-11-10 232757
初始代码
<style> /* 设置文档和主体的宽高和内外边距 */body, html { margin: 0; padding: 0; width: 100%; height: 100%; } /* 承载轮播照片的父盒宽高及样式 */.carousel-container { position: relative; width: 30%; height: 45%; /* 根据需要设置高度 */ border: 4px red solid;border-radius: 40px;background-color: gray;} .carousel-image{border-radius: 40px;}/* 设置承载按键父盒的宽高 */.carousel-image { width: 100%; height: 100%; } </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><script></script></body> 一.实现图片自动轮播效果
通过 if 语句来对图片进行自动轮播的效果，
当num>循环照片数时，需要从1开始再次循环；
当num<=循环照片数时，我们只需要使循环的照片路径进行改变即可；
就这样一个无限循环轮播效果就出来了
<script>//获取id节点const imgElement1=document.getElementById("img1"); //初始数var num=1; function showNextImage1() {
//当num大于4时，设置num再次等于1，就这样一直在1到4之间循环if(num>4){ num = 1;
//如果num小于4，那么就一直循环， }else{
//图片路径更改，当num=1时，图片路径为p1;num=2时，图片路径为p2依此类推imgElement1.src = `./img_src/p${num}.jpg`;
//计时器，用于循环num = num + 1; } }
// 图片切换的时间间隔，这里为每1秒切换一次图片 （无限循环）setInterval(showNextImage1, 1500); </script>屏幕录制 2024-11-10 193345
二.实现四个按钮切换图片
通过获取节点，监听鼠标事件来实现按钮切换图片。
方法一.通过获取id节点来实现：
//获取节点
const img_1=document.getElementById("p1");
//鼠标监听img_1.addEventListener("click",function(){ //函数来执行事件imgElement1.src=`./img_src/p1.jpg`;})const img_2=document.getElementById("p2");img_2.addEventListener("click",function(){imgElement1.src=`./img_src/p2.jpg`;})const img_3=document.getElementById("p3");img_3.addEventListener("click",function(){imgElement1.src=`./img_src/p3.jpg`;})const img_4=document.getElementById("p4");img_4.addEventListener("click",function(){imgElement1.src=`./img_src/p4.jpg`;})方法二.通过获取标签节点来实现：
const p=document.getElementsByTagName("p");const p=document.getElementsByTagName("p");p[0].addEventListener("click",function(){num=1;imgElement1.src=`./img_src/p${num}.jpg`;})p[1].addEventListener("click",function(){num=2;imgElement1.src=`./img_src/p${num}.jpg`;})p[2].addEventListener("click",function(){num=3;imgElement1.src=`./img_src/p${num}.jpg`;})p[3].addEventListener("click",function(){num=4;imgElement1.src=`./img_src/p${num}.jpg`;})屏幕录制 2024-11-10 205546
三. 实现回车键控制轮播是否开启
前面我们实现了图片自动轮播效果，现在我们要通过 "enter" 键来控制轮播的开关，所以我们要停止前面的自动轮播，将主动权给"enter"键。
首先要对图片自动轮播源代码进行改动，再将轮播的控制权交给enter 按键。
<style>
//图片轮播按钮样式设置
#output{width: 23%;height: 6%;background-color: rgb(253, 244, 81);border: 2px rgb(87, 79, 79) solid;text-align: center;border-radius: 30px;margin-top: 4%;margin-left: 4%;}
//防止父盒塌陷.clear_ele::after{content: ""; /* 这个伪元素的内容属性必须有 */display: block;/* border: 6px purple dashed; */clear: both;}
</style> <body>
<div id="output">图片轮播关闭......(按Enter键开启轮播)</div>
<script>
//图片自动轮播的控制const imgElement1=document.getElementById("img1"); var num=1; var scroll_img = false; //设置图片自动播放function showNextImage1() { //如果按下"enter"键，那么图片轮播就如以下循环播放；如果没有按下enter键，那么图片轮播关闭if(scroll_img){ if(num>4){ num = 1; }else{ imgElement1.src = `./img_src/p${num}.jpg`;num = num + 1; } } }// 图片切换的时间间隔，这里为每1秒切换一次图片 （无限循环）setInterval(showNextImage1, 1500); //实现回车键控制轮播是否开启//获取节点
const a=document.getElementById(`output`);
//监听整个文档的keydown事件document.addEventListener(`keydown`,function(event){const keyCode=event.key;if(keyCode==="Enter"){//当按下enter键，那么图片轮播由关闭变成开启scroll_img=!scroll_img;}//以下是图片轮播开关的样式改变if(scroll_img){a.textContent = "图片轮播开启......(按Enter键关闭轮播)";a.style.backgroundColor = "green";}else{a.textContent = "图片轮播关闭......(按Enter键开启轮播)";a.style.backgroundColor = "red";}});</script></body> 屏幕录制 2024-11-10 230621
轮播图完整代码
<!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: 30%; height: 45%; /* 根据需要设置高度 */ border: 4px red solid;border-radius: 40px;background-color: gray;} .carousel-image{border-radius: 40px;}/* 设置承载按键父盒的宽高 */.carousel-image { width: 100%; height: 100%; } .change-image .button{width: 5%;height: 10%;margin-left: 2%;background-color: yellow;border: 2px rgb(241, 241, 47) solid;border-radius: 30px;text-align: center;float: left;}#output{width: 23%;height: 6%;background-color: rgb(253, 244, 81);border: 2px rgb(87, 79, 79) solid;text-align: center;border-radius: 30px;margin-top: 4%;margin-left: 4%;}.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>// 【实现自动轮播】 const imgElement1=document.getElementById("img1"); var num=1; var scroll_img = false;function showNextImage1() { if(scroll_img){ if(num>4){ num = 1; }else{ imgElement1.src = `./img_src/p${num}.jpg`;num = num + 1; } } }// 图片切换的时间间隔，这里为每1秒切换一次图片 （无限循环）setInterval(showNextImage1, 1500); // 【实现四个按钮切换图片】const p=document.getElementsByTagName("p");p[0].addEventListener("click",function(){num=1;imgElement1.src=`./img_src/p${num}.jpg`;})p[1].addEventListener("click",function(){num=2;imgElement1.src=`./img_src/p${num}.jpg`;})p[2].addEventListener("click",function(){num=3;imgElement1.src=`./img_src/p${num}.jpg`;})p[3].addEventListener("click",function(){num=4;imgElement1.src=`./img_src/p${num}.jpg`;})// 【实现回车键控制轮播是否开启】const a=document.getElementById(`output`);document.addEventListener(`keydown`,function(event){const keyCode=event.key;if(keyCode==="Enter"){scroll_img=!scroll_img;}if(scroll_img){a.textContent = "图片轮播开启......(按Enter键关闭轮播)";a.style.backgroundColor = "green";}else{a.textContent = "图片轮播关闭......(按Enter键开启轮播)";a.style.backgroundColor = "red";}});</script></body>
</html>
![[ Linux 命令基础 5 ] Linux 命令详解-网络管理命令](https://i-blog.csdnimg.cn/direct/ad0904e5c44145b7b6ac99e8afab6d30.png)
