标签：50% 轮播 指示器 JavaScript li img 使用 var 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片轮播</title>
<style>
/* 轮播图容器样式 */
.box {
height: 500px;
width: 600px;
border: 1px solid red;
margin: 100px auto;
position: relative; /* 为绝对定位的子元素提供参考 */
}
/* 图片样式 */
.it {
width: 600px;
height: 500px;
position: absolute;
left: 0;
top: 0;
opacity: 0; /* 默认隐藏所有图片 */
transition: all ease 1s; /* 添加过渡效果 */
}
/* 分页指示器容器样式 */
.pation {
position: absolute;
list-style: none;
padding: 0;
width: 200px;
transform: translateX(-50%);
left: 50%;
bottom: 10px;
z-index: 1;
display: flex;
justify-content: space-around;
}
/* 当前活动图片的样式 */
.active {
opacity: 1;
}
/* 分页指示器样式 */
.pation li {
width: 15px;
height: 15px;
background-color: gray;
border-radius: 50%;
transition: all linear 1s;
}
/* 当前活动分页指示器的样式 */
.pation > .ac {
background: skyblue;
}
/* 下一张按钮样式 */
.next {
position: absolute;
transform: translate(0, -50%);
top: 50%;
right: 10px;
font-size: 40px;
color: white;
cursor: pointer;
z-index: 99;
}
/* 上一张按钮样式 */
.prev {
position: absolute;
transform: translate(0, -50%);
top: 50%;
left: 10px;
font-size: 40px;
color: white;
cursor: pointer;
z-index: 99;
}
</style>
</head>
<body>
<!-- 轮播图容器 -->
<div class="box" onm ouseenter="stop()" onm ouseleave="start()">
<!-- 分页指示器容器 -->
<ul class="pation">
<!-- 分页指示器将通过JavaScript动态添加 -->
</ul>
<!-- 下一张按钮 -->
<div class="next" onclick="next()"> > </div>
<!-- 上一张按钮 -->
<div class="prev" onclick="prev()"> < </div>
</div>
<script>
var list = [] // 存储图片元素的数组
var parr = [] // 存储分页指示器元素的数组
var arr = [
"0.jpg",
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
] // 图片文件名数组
var box = document.querySelector(".box")
var ul = document.querySelector(".pation")
// 遍历图片数组，创建图片和分页指示器
arr.forEach((v, k) => {
// 创建图片元素
var img = document.createElement("img")
img.src = `./beijing/${v}` // 设置图片路径
img.className = "it" // 添加类名
k == 0 && img.classList.add("active") // 第一张图片添加active类
box.appendChild(img)
list.push(img)
// 创建分页指示器
var li = document.createElement("li")
k == 0 && li.classList.add("ac") // 第一个指示器添加ac类
li.onclick = function () {
i = k // 更新当前索引
move() // 切换到点击的图片
}
ul.appendChild(li)
parr.push(li)
})
var i = 0 // 当前显示图片的索引
// 切换图片的函数
function move() {
// 移除所有图片和指示器的活动状态
list.forEach((v, k) => {
v.classList.remove("active")
parr[k].classList.remove("ac")
})
// 为当前索引的图片和指示器添加活动状态
list[i].classList.add("active")
parr[i].classList.add("ac")
}
var t = setInterval(move, 2000) // 设置自动轮播定时器
// 开始自动轮播
function start() {
t = setInterval(move, 2000)
}
// 停止自动轮播
function stop() {
clearInterval(t)
}
// 下一张图片
function next() {
if (i < arr.length - 1) {
i++
} else {
i = 0 // 循环到第一张
}
move()
}
// 上一张图片
function prev() {
if (i > 0) {
i--
} else {
i = arr.length - 1 // 循环到最后一张
}
move()
}
</script>
</body>
</html>
标签：50%,
轮播,
指示器,
JavaScript,
li,
img,
使用,
var,
图片
From： https://blog.csdn.net/m0_69124593/article/details/140644218