<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.wrapper{
width: 640px;
height: 368px;
margin: 50px auto;
position: relative;
}
.wrapper li{
position: absolute;
left: 0;
top:0;
}
.toggle{
width: 640px;
height: 368px;
}
.toggle span{
width: 30px;
height: 50px;
background:#FF9629;
position: absolute;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
/* display: none;*/
}
#prev{
top:159px;
}
#next{
top:159px;
right:0;
}
</style></head>
<body>
<p class="wrapper">
<ul id="list">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
</ul>
<p class="toggle">
<span id="prev"><</span>
<span id="next">></span>
</p></p>
<script type="text/javascript">
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
function fn(ev) {
var nowLeft =parseInt(list.style.left)+ev;
list.style.left = nowLeft+"px";
}
prev.onclick = function () {
fn(640);
};
next.onclick = function () {
fn(-640);
};</script>
</body>
</html>
I would like to ask why the last picture is displayed on the top instead of the first one!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
</html>
The problem occurs in .wrapper li{position: absolute;left: 0;top:0;}, above this sentence, all li are absolutely positioned, and the positions are left: 0, top: 0, and the following Covers the previous one, so it is the last one displayed; the way you write the carousel image on Baidu, according to your way of writing, cannot be adjusted
You can save the image path in the array and use js to replace the src value of the image to achieve click play
You absolutely position all img elements, of course the last one is at the top, and you absolutely position their parent containers