<!DOCTYPE html>
<html lang="fr">
<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>
Je voudrais demander pourquoi la dernière photo est affichée sur la page au lieu de la première !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
</html>
Le problème se produit dans .wrapper li{position : absolue;gauche : 0;top:0;}, au-dessus de cette phrase, tous les li sont positionnés de manière absolue et les positions sont à gauche : 0, haut : 0, et ce qui suit couvre le la précédente, c'est donc la dernière affichée ; la façon dont vous écrivez l'image du carrousel sur Baidu, selon votre façon d'écrire, ne peut pas être ajustée
Vous pouvez enregistrer le chemin de l'image dans le tableau et utiliser js pour remplacer la valeur src de l'image afin de réaliser une lecture par clic
Vous avez positionné de manière absolue tous les éléments img, bien sûr le dernier est en haut, et vous avez positionné leurs conteneurs parents de manière absolue