<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
{
width: 670px;
border: 1px solid red;
margin: 100px auto;
position: relative;
}
div>img
{
vertical-align: bottom;
}
p
{
position: absolute;
width: 100%;
left: 0px;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
}
p>span
{
display: inline-block;
width: 30px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 40px;
color: #FFF;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div>
<img src="images/ad1.jpg" alt="">
<p>
<span id="pre"><</span>
<span id="next">></span>
</p>
</div>
<script type="text/javascript">
let qq=document.querySelector("img");
let preBtn = document.querySelector("#pre");
let nextBtn = document.querySelector("#next");
let images=["images/ad1.jpg",
"images/ad2.jpg",
"images/ad3.jpg",
"images/ad4.jpg",
"images/ad5.jpg",];
let currentIndex=0;
let maxIndex=images.length-1;
preBtn.onclick=function()
{
currentIndex--;
if(currentIndex<0)
{
currentIndex=maxIndex;
}
qq.src=images[currentIndex];
}
nextBtn.onclick=function()
{
currentIndex++;
if(currentIndex>maxIndex)
{
currentIndex=0;
}
qq.src=images[currentIndex];
}
</script>
</body>
</html>
