<!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;
overflow: hidden;
}
.wrapper li{
float: left;
width: 640px;
}
#list{
/* width: 3200px;*/
position: absolute;
}
.wrapper li img{
width: 100%;
}
.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;
}
nav{
width: 640px;
height: 20px;
position: absolute;
bottom:10px;
left: 0;
text-align: center;
line-height: 20px;
}
nav span{
width: 10px;
height: 10px;
background: #FFC8A0;
border-radius: 50%;
display:inline-block;
margin: 0 2px;
}
.active{
background: red;
}
</style></head>
<body>
<p class="wrapper">
<ul id="list" style="left:0px">
<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>
<nav id="nav">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav></p>
<script type="text/javascript">
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var lis = document.querySelectorAll("#list li");/ list.innerHTML += list.innerHTML;//Ajouter 5 liens supplémentaires/
var wrapper = document.getElementById("wrapper");
//动态的获取宽度
var styleN = document.createElement("style");
var text = "#list{width: "+640*lis.length+"px;}";
text += "#list li{width: "+640+"px;}";
styleN.innerHTML = text;
document.head.appendChild(styleN);
//图片轮播逻辑
function fn(ev) {
var nowLeft =parseInt(list.style.left)+ev;
list.style.left = nowLeft+"px";
list.style.transition ="1s";
/* console.log(list.style.left);*/
if(nowLeft < -(640*lis.length-640)){
list.style.left = 0+"px";
}else if(nowLeft > 0){
list.style.left = -(640*lis.length-640)+"px";
};
}
//自动轮播效果
var time;
play();
function play() {
time=setInterval(function () {
next.onclick();
},2000)
}
//控制左右切换
prev.onclick = function () {
fn(640);
};
next.onclick = function () {
fn(-640);
};
</script>
</body>
</html>
Je voudrais demander, lorsque l'image atteint la dernière image puis affiche l'image suivante, comment peut-elle ne pas voir l'effet de transition au milieu et la faire passer instantanément à la première image ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous mettez le premier clone d'image à la fin
J'en ai écrit un en utilisant jquery, vous pouvez vous y référer
Affichage des effets :
https://ityanxi.github.io/seg...
Vous pouvez le rechercher sur le site. En fait, de nombreuses personnes ont posé des questions à ce sujet. Le principe est une tromperie visuelle, similaire à la structure de 5,1,2,3,4,5,1. Quand on arrive à la cinquième image, il faut revenir à 1. Tout d'abord, on fait défiler vers le 1 le plus à droite selon. l'animation. À la fin de la transition Ajustez instantanément la position pour que le 1 à gauche remplace le 1 actuel. Pour faire simple, la position du 1 à droite est -1920px, et la position du 1 à gauche est 0px. . Juste au moment où le carrousel atteint -1920px, la position est instantanément ajustée à 0px, atteignant ainsi l'objectif de tromperie visuelle. Il en va de même pour 1 à 5, changez simplement la direction