<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 600px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
li {
position: absolute;
top: 0;
left: 0;
}
.left {
width: 30px;
height: 50px;
position: absolute;
top: 125px;
left: 0px;
font-size: 30px;
color: #fff;
line-height: 45px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
}
.right {
width: 30px;
height: 50px;
position: absolute;
top: 125px;
right: 0px;
font-size: 30px;
color: #fff;
line-height: 45px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
}
.list {
position: absolute;
left: 250px;
bottom: 30px;
width: 100px;
height: 20px;
z-index: 10000;
}
.itme {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin-left: 10px;
}
.itme1 {
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./img/1.jpg" alt="" width="600px" height="300px"></li>
<li><img src="./img/2.jpg" alt="" width="600px" height="300px"></li>
<li><img src="./img/6.jpg" alt="" width="600px" height="300px"></li>
<li><img src="./img/4.jpg" alt="" width="600px" height="300px"></li>
</ul>
<div class="list">
<div class="itme itme1"></div>
<div class="itme"></div>
<div class="itme"></div>
<div class="itme"></div>
</div>
<span class="left"><</span>
<span class="right">></span>
</div>
<script>
var ul = document.querySelectorAll("ul>li");
var span = document.querySelector(".left");
var span1 = document.querySelector(".right");
var box = document.querySelector(".box");
var list1 = document.querySelector(".list")
var itme1 = document.querySelectorAll(".list>.itme")
// console.log(itme1)
// console.log(ul)
var a = 0;
function fun1() {
a++;
if (a > 3) {
a = 0;
}
for (var i = 0; i < 4; i++) {
ul[i].style = "display:none";
itme1[i].style = "background:#fff"
}
ul[a].style = "display:block";
itme1[a].style = "background:black"
}
var time = setInterval(fun1, 2000);
box.onmouseenter = function () {
clearInterval(time);
}
box.onmouseleave = function () {
time = setInterval(fun1, 2000);
}
span1.onclick = function () { fun1() };
span.onclick = function () {
a--;
if (a < 0) {
a = 3;
}
for (var i = 0; i < 4; i++) {
ul[i].style = "display:none";
itme1[i].style = "background:#fff"
}
ul[a].style = "display:block";
itme1[a].style = "background:black"
}
for (var c = 0; c < 4; c++) {
itme1[c].aaa = c;
itme1[c].onclick = function () {
for (var i = 0; i < 4; i++) {
ul[i].style = "display:none";
itme1[i].style = "background:#fff"
}
index = this.aaa;
console.log(index);
ul[index].style = "display:block";
itme1[index].style = "background:black"
}
}
</script>
</body>
</html>
效果图