目录
一.效果预览图
二，实现思路
1.html部分
<div class="wp">
这个容器div具有"class"属性，值为"wp"，表示"wrapper"（包装器）。它设置了幻灯片的尺寸和定位方式。
<div id="list">
<img src="./images/微信图片编辑_20221118164531.jpg" alt="">
<img src="./images/微信图片编辑_20221118170018.jpg" alt="">
<img src="./images/微信图片编辑_20221118170050.jpg" alt="">
<img src="./images/微信图片编辑_20221118170113.jpg" alt="">
</div>
这个ID为"list"的div包含了一系列的<img>标签，每个标签代表幻灯片中的一张图片。每个<img>标签的src属性应指向相应的图片文件。
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
ID为"box"的div表示分页器的圆点。每个<span>标签代表一个圆点，对应幻灯片中的一张图片。<span>标签的数量应与幻灯片的数量相匹配。
<div id="r"></div>
<div id="l"></div>
ID为"r"和"l"的div通常表示幻灯片的向右（前进）和向左（后退）导航按钮。
2.css部分
*{
margin: 0;
padding: 0;
}
这个星号表示应用于所有元素的通用样式。在这里，它将页面上所有元素的外边距和内边距都设置为0。
.wp{
width: 250px;
height: 400px;
margin: 40px auto 0;
position: relative;
overflow: hidden;
}
这个类选择器.wp用于设置幻灯片容器的样式。它设置了幻灯片容器的宽度和高度为250px和400px，通过margin属性设置了顶部边距40px，auto表示自动水平居中对齐。position: relative表示相对定位，并设置了overflow: hidden，使超出容器尺寸的内容被隐藏。
#list{
display: flex;
width: 1000px;
transform: translateX(0);
/* 添加过渡动画 */
transition: all 1s;
}
这个ID选择器#list用于设置图片列表的样式。通过display: flex实现了图片的水平排列。width: 1000px设置了图片列表的宽度为1000px。transform: translateX(0)是一个位移变换，这里设置为初始位置，可以通过改变translateX的值来切换不同的幻灯片位置。transition: all 1s表示添加了1秒的过渡动画效果，使幻灯片在切换时具有平滑的过渡效果。
.wp div img{
width: 250px;
height: 400px;
}
这个选择器用于设置幻灯片中的图片样式。通过设置width: 250px和height: 400px，将图片的宽度和高度限制为250px和400px。
#box {
height: 40px;
width: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.5);
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
这个ID选择器#box用于设置分页器容器的样式。它设置了分页器容器的高度为40px，宽度为100%，并使用position: absolute相对于父容器进行定位。background: rgba(0, 0, 0, 0.5)设置了背景为半透明的黑色。left: 0和bottom: 0将分页器容器定位在父容器的左下角。display: flex、justify-content: center和align-items: center实现了分页器内圆点的水平居中对齐和垂直居中对齐。
#box span {
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
这个选择器用于设置分页器容器内的圆点样式。通过width: 10px和height: 10px将圆点的宽度和高度设置为10px。background: #fff将圆点的背景颜色设置为白色。border-radius: 50%将圆点的边框半径设置为50%，使其呈现圆形。margin: 0 5px设置了圆点之间的水平间距为5px。cursor: pointer将鼠标光标样式设置为手型，表示可以进行点击操作。
#box span:hover{
background: pink;
box-shadow: 0 0 0 2px #ccc;
}
这个选择器用于设置鼠标悬停在圆点上时的样式。background: pink将圆点的背景颜色设置为粉色。box-shadow: 0 0 0 2px #ccc设置了圆点的阴影效果，使其在悬停时显示一个2像素宽度的灰色边框。
#r{
width: 20px;
height: 20px;
position: absolute;
top: 170px;
right: 0;
background: url(./images/右箭头.png)no-repeat 0 0/100% 100%;
}
ID选择器#r用于设置幻灯片的向右导航按钮的样式。宽度和高度都设置为20px。通过position: absolute将按钮相对于父容器进行定位。top: 170px将按钮定位在距离顶部170px的位置。right: 0将按钮定位在父容器的右侧。background: url(./images/右箭头.png)no-repeat 0 0/100% 100%设置了按钮的背景为指定图片，并将该图片作为背景图实现按钮的显示。
#l{
width: 20px;
height: 20px;
position: absolute;
top: 170px;
left: 0;
background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%;
}
ID选择器#l用于设置幻灯片的向左导航按钮的样式。宽度和高度都设置为20px。通过position: absolute将按钮相对于父容器进行定位。top: 170px将按钮定位在距离顶部170px的位置。left: 0将按钮定位在父容器的左侧。background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%设置了按钮的背景为指定图片，并将该图片作为背景图实现按钮的显示。
3.js部分
1. var box=document.getElementById('box');
这行代码获取具有id为’box’的元素，并将其赋值给变量box。
2. var spanBox=box.getElementsByTagName('span');
这行代码获取box元素下的所有span元素，并将这些元素保存在变量spanBox中。
3. var list=document.getElementById('list');
这行代码获取具有id为’list’的元素，并将其赋值给变量list。
4. spanBox[0].onclick=function(){
list.style.transform="translateX(0px)";
};
这段代码给spanBox[0]元素绑定了一个点击事件处理函数。当点击spanBox[0]元素时，它会将list元素的transform样式属性设置为translateX(0px)，即不产生水平偏移。
5. spanBox[1].onclick=function(){
list.style.transform="translateX(-250px)";
console.log("点击了第二个图片");
};
这段代码给spanBox[1]元素绑定了一个点击事件处理函数。当点击spanBox[1]元素时，它会将list元素的transform样式属性设置为translateX(-250px)，即产生水平偏移250个像素，并在控制台打印消息"点击了第二个图片"。
6. spanBox[2].onclick=function(){
list.style.transform="translateX(-500px)";
};
这段代码给spanBox[2]元素绑定了一个点击事件处理函数。当点击spanBox[2]元素时，它会将list元素的transform样式属性设置为translateX(-500px)，即产生水平偏移500个像素。
7. spanBox[3].onclick=function(){
list.style.transform="translateX(-750px)";
};
这段代码给spanBox[3]元素绑定了一个点击事件处理函数。当点击spanBox[3]元素时，它会将list元素的transform样式属性设置为translateX(-750px)，即产生水平偏移750个像素。
8. var n=0;
这行代码声明了一个名为n的变量，并将其初始化为0。
9. var r=document.getElementById('r');
var l=document.getElementById('l');
这行代码通过getElementById方法获取具有id为’r’和’l’的元素，并将它们分别赋值给变量r和l。
10. r.onclick=function(){
if(n<3){
n++;
}
list.style.transform="translateX(-"+n*250+"px)";
console.log(n);
};
这段代码给变量r绑定了一个点击事件处理函数。当点击r元素时，它会执行以下操作：
- 如果
n小于3（图片索引的最大值），则将n递增1。 - 计算
translateX的值为-n*250，将它赋值给list元素的transform样式属性。这样可以产生水平偏移。 - 在控制台打印
n的值。
11. l.onclick=function(){
if(n>0){
n--;
}
list.style.transform="translateX(-"+n*250+"px)";
console.log(n);
};
这段代码给变量l绑定了一个点击事件处理函数。当点击l元素时，它会执行以下操作：
- 如果
n大于0（图片索引的最小值），则将n递减1。 - 计算
translateX的值为-n*250，将它赋值给list元素的transform样式属性。这样可以产生水平偏移。 - 在控制台打印
n的值。
以上是代码片段的详细解释。这段代码主要包含了事件处理函数，通过点击不同的按钮来改变list元素的transform样式属性，从而产生水平偏移效果。同时，它还使用了变量n来记录当前显示的图片索引，在切换图片时增加或减少n的值，并将其应用于水平偏移的计算。
三.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
.wp{
width: 250px;
height: 400px;
margin: 40px auto 0;
position: relative;
overflow: hidden;
}
#list{
display: flex;
width: 1000px;
transform: translateX(0);
/* 添加过渡动画 */
transition: all 1s;
}
.wp div img{
width: 250px;
height: 400px;
}
#box {
height: 40px;
width: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.5);
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box span {
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
#box span:hover{
background: pink;
box-shadow: 0 0 0 2px #ccc;
}
#r{
width: 20px;
height: 20px;
position: absolute;
top: 170px;
right: 0;
background: url(./images/右箭头.png)no-repeat 0 0/100% 100%;
}
#l{
width: 20px;
height: 20px;
position: absolute;
top: 170px;
left: 0;
background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%;
}
</style>
</head>
<body>
<!-- 外层的div，包含图片列表 -->
<div class="wp">
<div id="list">
<img src="./images/微信图片编辑_20221118164531.jpg" alt="">
<img src="./images/微信图片编辑_20221118170018.jpg" alt="">
<img src="./images/微信图片编辑_20221118170050.jpg" alt="">
<img src="./images/微信图片编辑_20221118170113.jpg" alt="">
</div>
<!-- 分页器 -->
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="r"></div>
<div id="l"></div>
</div>
</body>
</html>
<script>
// 获取需要点击的分页器
let box = document.getElementById('box');
let spanBox = box.getElementsByTagName('span');
// 获取列表元素
let list = document.getElementById('list');
// 点击分页器
spanBox[0].onclick = function () {
list.style.transform='translateX(0px)'
};
spanBox[1].onclick = function () {
list.style.transform='translateX(-250px)'
console.log('点击了第二个图片');
};
spanBox[2].onclick = function () {
list.style.transform='translateX(-500px)'
};
spanBox[3].onclick = function () {
list.style.transform='translateX(-750px)'
};
let n = 0;
let r = document.getElementById('r');
let l = document.getElementById('l');
r.onclick = function (){
n<3? n++ :n;
console.log(n);
list.style.transform='translateX(-'+n*250+'px)'
};
l.onclick = function (){
n>0? n-- :n=0;
console.log(n);
list.style.transform='translateX(-'+n*250+'px)'
};
</script>
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
