<!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>
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
}
.box {
margin: 0 auto;
border: 3px solid #ccc;
width: 240px;
height: 240px;
position: relative;
}
.box a {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid red;
top: 50%;
margin-top: -10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 20px;
text-decoration: none;
opacity: 0.7;
}
.box a:hover {
opacity: 1;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.box p {
width: 100%;
height: 26px;
background-color: rgba(107, 104, 104, 0.6);
position: absolute;
left: 0;
line-height: 26px;
text-align: center;
color: #fff;
}
.box p:first-of-type {
top: 0;
}
.box p:last-of-type {
bottom: 0;
}
</style>
<script>
// 窗口加载完再执行
window.onload = function () {
var myBox = document.querySelector(".box")
var myImg = myBox.querySelector(".box img")
var mya = myBox.querySelectorAll(".box a")
var myp = myBox.querySelectorAll(".box p")
var arr = ["./img/1.jpg", './img/2.jpg', './img/3.jpg', './img/4.jpg'];
var title = ["诺基亚1110", '华为P30', '苹果iPhone100', '大米10'];
var num = 0;
myp[0].innerHTML = num + 1 + '/' + arr.length;
myp[1].innerHTML = title[num]
mya[1].onclick = function () {
num++;
if (num > arr.length - 1) { num = 0 }
myp[0].innerHTML = num + 1 + '/' + arr.length;
myp[1].innerHTML = title[num]
myImg.src = arr[num];
}
mya[0].onclick = function () {
num--;
if (num < 0) { num = arr.length - 1 }
myp[0].innerHTML = num + 1 + '/' + arr.length;
myp[1].innerHTML = title[num]
myImg.src = arr[num];
}
}
</script>
</head>
<body>
<div class="box">
<img src="./img/1.jpg" alt="">
<a href="#" id="prev"><</a>
<a href="#" id="next">></a>
<p></p>
<p></p>
</div>
</body>
</html>
