DOM操作和事件监听综合练习—

下面制作一个如下图所示的轮播图（按Enter键可以控制轮播的开启和关闭，或者点击按钮“第几张”即可跳转到第几张）：

下面是其HTML和CSS代码（还没有设置轮播）：

<!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: 25%;  height: 40%; /* 根据需要设置高度 */ border: 4px red solid;background-color: gray;}  .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="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>  
</html>

下面开始制作轮播图，制作以上轮播图可分为三个步骤：

一、实现自动轮播

首先获取图片标签节点

        const imgElement = document.getElementById("img1");

然后设置一个布尔变量，定义一个函数，使用if条件语句，如果条件为true就运行代码实现轮播，修改img标签的图片路径

        // 修改img标签的图片路径var i = 1;var scroll_img = true;  //设置布尔变量function showNextImage1() {     if(scroll_img){      //如果条件为true就运行代码实现轮播if(i>4){i = 1;}else{               imgElement.src = `./img_src/p${i}.jpg`;i =  i + 1;} }}

最后使用定时函数每1秒切换一次图片（无限循环）

        setInterval(showNextImage1, 1000);   // 每1秒切换一次图片 （无限循环）

这样自动轮播就设置好啦！！

二、实现带鼠标单击切换

首先设置好按钮CSS样式，使其浮动起来，排布在图片上方（前面几张博客对浮动和清除浮动有详细讲解）

        .carousel-container .carousel-image {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  opacity: 1; /* 不透明度0-1 */  }  .change-image{width: 20%;  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;}.clear_ele::after{content: "";  /* 这个伪元素的内容属性必须有 */display: block;/* border: 6px purple dashed; */clear: both;}

接下来获取每一个按钮标签节点，使用监听鼠标单击事件修改其图片路径，以实现四个按钮切换图片

        // 【实现四个按钮切换图片】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`;})

这样带鼠标单击切换图片就做好啦！！

三、实现带键盘控制轮播开关

首先添加一个节点并输入提示文字，然后为它设置CSS样式

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>图片自动切换（轮播图效果）</title>  <style>  /* 添加样式 */#output {  color: white;background-color: green; text-align: center;width: 20%;  height: 3%; margin-top: 1%;      position : relative;left: 3%;   border-radius: 10px;} </style>  
</head>  
<body>  //插入节点<div id="output">图片轮播开启......(按Enter键关闭轮播)</div></body>  
</html>

接着获取显示按键信息的元素并且监听整个文档的keydown事件

    const outputDiv = document.getElementById('output');  // 获取显示按键信息的元素document.addEventListener('keydown', );// 监听整个文档的keydown事件

然后定义一个函数，并且写出获取按键的代码

    document.addEventListener('keydown',  // 监听整个文档的keydown事件function(event) {              const keyCode = event.key; // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）});

接着设置如果按下的键为Enter键，使布尔变量scroll_img取反（false），使上面修改图片路径的代码运行不了

    document.addEventListener('keydown',  // 监听整个文档的keydown事件function(event) {              const keyCode = event.key; // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）if(keyCode==="Enter"){scroll_img = !scroll_img;      }});

最后使用if条件语句设置提示信息样式，如果是scroll_img（true），背景色为绿色，否则为红色

    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";}});

这样一个可以使用键盘控制的完整的轮播图就做好啦！！

完整代码在这里：

<!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: 25%;  height: 40%; /* 根据需要设置高度 */ 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: 20%;  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: green; text-align: center;width: 20%;  height: 3%; margin-top: 1%;      position : relative;left: 3%;   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>  // 【实现自动轮播】const imgElement = document.getElementById("img1"); var i = 1;var scroll_img = true;function showNextImage1() {     if(scroll_img){if(i>4){i = 1;}else{               imgElement.src = `./img_src/p${i}.jpg`;i =  i + 1;} }}  // 每1秒切换一次图片 （无限循环）setInterval(showNextImage1, 1000);  // 【实现四个按钮切换图片】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`;})// 【实现回车键控制轮播是否开启】    const outputDiv = document.getElementById('output');  // 获取显示按键信息的元素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";}});</script>  
</body>  
</html>