<!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>
Ich würde gerne fragen, warum das letzte Bild auf der Seite angezeigt wird und nicht das erste!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
</html>
问题是出现在.wrapper li{position: absolute;left: 0;top:0;}，这一句上面，所有的li都被绝对定位了，并且位置都是left: 0, top: 0，后面的覆盖在前面的上面，因此就是显示的最后一个了；百度一下轮播图的写法，依你的写法，是整不出来的
可以将图片路径保存在数组里面，使用js替换image的src值来实现点击播放
你把所有的img元素都绝对定位了，当然是最后一张在最上面啊，你把他们的父容器绝对定位