### 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);
}
~~~
