<!DOCTYPE html>
<html lang="ms">
<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></kepala>
<badan>
<p class="pembungkus">
<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>
Saya ingin bertanya mengapa gambar terakhir dipaparkan pada halaman dan bukannya gambar pertama!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
</html>
Masalah berlaku dalam .wrapper li{kedudukan: mutlak;kiri: 0;atas:0;}, di atas ayat ini, semua li berada pada kedudukan mutlak, dan kedudukan ditinggalkan: 0, atas: 0, dan yang berikut Meliputi yang sebelumnya, jadi ia adalah yang terakhir dipaparkan; cara anda menulis imej karusel pada Baidu, mengikut cara penulisan anda, tidak boleh dilaraskan
Anda boleh menyimpan laluan imej dalam tatasusunan dan menggunakan js untuk menggantikan nilai src imej untuk mencapai main klik
Anda benar-benar meletakkan semua elemen img, sudah tentu yang terakhir berada di bahagian atas, dan anda benar-benar meletakkan bekas induknya