#如何去实现图片轮播效果图，通过创建一个基本的 HTML 页面结构，包含用于展示轮播图片的区域、左右切换箭头以及放置轮播图片的容器。#
整体架构
一、CSS 样式
- 接下来创建一个
styles.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/s1.webp" 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>
</div>
<script>
</script>
</body>
</html>代码运行后如下：
二、JavaScript 代码
1. 实现自动轮播
- 创建一个
script.js文件来实现自动轮播的动态效果，包括自动切换图片。
- 通过document.getElementById("") 去获取图片的 id 属性，if 循环图片，开始图片的大小为1，跳到 else 里，逐一轮播循环增加，增加到4则会等于1，重新轮播。
<!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 */
}
</style>
</head>
<body>
<div class="carousel-container">
<img src="./img_src/s1.webp" class="carousel-image" id="img1">
</div>
<div class="clear_ele change-image">
<p class="button" id="s1">第1张</p>
<p class="button" id="s2">第2张</p>
<p class="button" id="s3">第3张</p>
</div>
<script>
// 【实现自动轮播】
const imgElement = document.getElementById("img1");
var i = 1;
// 修改img标签的图片路径
function showNextImage1() {
if(i>3){
i = 1;
}else{
imgElement.src = `./img_src/s${i}.webp`;
i = i + 1;
}
}
setInterval(showNextImage1, 1500); // 每1秒切换一次图片 （无限循环）
</script>
</body>
</html>代码运行后如下：
- 通过修改整个父节点下节点（innerHTML实现），通过获得 id 属性实现循环的效果
【实现自动轮播】 方案二：直接改整个父节点下节点（innerHTML实现）
const divElement = document.getElementsByClassName("carousel-container")[0];
var i = 1;
function showNextImage2() {
if(i>3){
i = 1;
}else{
divElement.innerHTML = `<img src="./img_src/p${i}.jpg" class="carousel-image active" id="img1">`
i = i + 1;
}
} 2. 隔秒自动轮播
每1秒切换一次图片 （无限循环）
setInterval(showNextImage1, 1500); 3.实现四个按钮切换图片
- 获得元素属性，为四个按钮添加事件监听，通过click点击属性，点击一次i=1，图片路径i=1，点击两次i=2，注意类推，获取每次点击获得的图片。
// 【实现四个按钮切换图片】
const p = document.getElementsByTagName("p");
p[0].addEventListener("click",
function(){
i = 1;
imgElement.src = `./img_src/s${i}.webp`;
}
)
p[1].addEventListener("click",
function(){
i = 2;
imgElement.src = `./img_src/s${i}.webp`;
}
)
p[2].addEventListener("click",
function(){
i = 3;
imgElement.src = `./img_src/s${i}.webp`;
}
)4.实现回车键控制轮播是否开启
-
获取显示按键信息的元素
const outputDiv = document.getElementById('output'); - 监听整个文档的keydown事件,获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）,将提示信息添加到输出区域.
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";
}
}
);
