下面制作一个如下图所示的轮播图(按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>