### 1. html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
<div class="conter" id="conter">
<div class="list" id="list" style="left:0px">
<img src="现代美女/01.png" alt="">
<img src="现代美女/02.png" alt="">
<img src="现代美女/03.png" alt="">
<img src="现代美女/04.png" alt="">
<img src="现代美女/05.png" alt="">
</div>
<div class="qian" id="qian"></div>
<div class="hou" id="hou"></div>
<div class="button" id="button">
<span class="cur"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
// 前后箭头js
var conter = document.getElementById("conter");
var list = document.getElementById("list");
var qian = document.getElementById("qian");
var hou = document.getElementById("hou");
var buttons = document.querySelectorAll(".button span");
var Value = parseInt(list.style.left);
var count = 0;
// 首先要设置一个变量（全局变量）记录左右按钮的点击次数 图片移动 用这个变量装下标
// 简单点就是说使用一个全局变量把所有的东西都串起来
console.log(Value);
hou.onclick = function () {
count++;
if (count == 5) {
count = 0;
}
if (Value > -2400) {
Value = -600 * count;
} else {
Value = 0;
}
list.style.left = Value + "px";
// 下面的span对应改变
for (let i = 0; i < 5; i++) {
if (count == i) {
buttons[count].classList.add("cur");
} else {
buttons[i].classList.remove("cur");
}
}
}
//
qian.onclick = function () {
count--;
if (count == -1) {
count = 4;
}
if (Value >= -2400) {
Value = count * -600;
} else {
Value = 0;
}
list.style.left = Value + "px";
// 下面的span对应改变
for (let i = 0; i < 5; i++) {
if (count == i) {
buttons[count].classList.add("cur");
} else {
buttons[i].classList.remove("cur");
}
}
}
// span 切换
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
count = i;
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("cur");
}
this.classList.add("cur");
// 对应图片切换
list.style.left = i * (-600) + "px";
}
}
//
</script>
</body>
</html>
~~~
### 2. css
~~~
*{margin: 0;padding: 0}
.conter{
overflow: hidden;
margin-left: auto;
margin-right: auto;
position: relative;
width: 600px;
height: 400px;
border: 1px solid #333;
}
.list{
position: absolute;
width: 42000px;
height: 400px;
}
.list img{
/* display: none; */
float: left;
}
.qian,.hou{
width: 42px;
height: 68px;
overflow: hidden;
top: 160px;
position: absolute;
z-index: 100;
background: url("../现代美女/icon-slides.png");
}
.hou{
right: 0;
background-position-x: 125px;
}
.button{
position: absolute;
z-index:150;
bottom: 10px;
left:50%;
transform: translateX(-50%);
}
.button span{
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #fff;
border-radius: 50%;
}
.cur{
background: rgb(166, 238, 83);
}
~~~
