Maison > Article > interface Web > js implémente un carrousel fluide au début et à la fin des images
js implémente un carrousel fluide au début et à la fin des images
- 小云云original
- 2018-01-15 14:16:451369parcourir
Cet article vous propose principalement un article pour réaliser un carrousel fluide du début et de la fin des images (méthode native JS - throttling). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Donnez d'abord le code HTML. Veuillez noter que la première image 1.jpg est ajoutée à la fin de la liste d'images du carrousel (#list), et la dernière image 5.jpg est ajoutée à l'en-tête.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首尾轮播</title> <link rel="stylesheet" href="首尾轮播.css" rel="external nofollow" > <script src="首尾轮播.js"></script> </head> <body> <p id="container"> <p id="list"> <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></p> <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></p> <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/2.jpg" alt=""></a></p> <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/3.jpg" alt=""></a></p> <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/4.jpg" alt=""></a></p> <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></p> <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></p> </p> <p class="arrow" id="prev"><</p> <p class="arrow" id="next">></p> </p> </body> </html>
Ensuite, les codes CSS et JS sont donnés. Vous pouvez ajuster les paramètres du conteneur et de la liste en fonction de la taille, de la quantité et de la largeur de l'image. approprié. C'est également l'encapsulation des paramètres JS à considérer.
*{
margin: 0;
padding: 0;
}
#container{
height: 400px;
width: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
border: 1px solid black;
}
#list>p {
float: left;
}
#list{
position: absolute;
height: 400px;
width: 3600px;
}
#list img{
height: 400px;
width: 500px;
}
.arrow {
user-select:none;
position: absolute;
top:150px;
z-index: 2;
background-color: #aaa;
height: 100px;
width: 80px;
cursor: pointer;
opacity: 0.5;
display: none;
line-height: 100px;
text-align: center;
color: #222;
font-size: 3em;
}
#container:hover .arrow{
display: block;
}
#prev{
left:20px;
}
#next{
right: 20px;
}En JS, nous pouvons contrôler la vitesse de changement d'image en changeant la variable de vitesse....Ici element.style.transition est utilisé pour contrôler l'effet de transition .
window.onload=function(){
var container = document.getElementById('container');
var list = document.getElementById('list');//获取图片容器
var prev = document.getElementById('prev');//向前按钮
var next = document.getElementById('next');//向后按钮
var nowP = 1; //显示位置
var judge = null; //执行权
var speed = 0.1; // 切换速度 秒
prev.onclick=function(){
if(!judge){
judge = setTimeout(function(){
if(nowP==1){setTimeout(function(){
list.style.transition="left 0s";
list.style.left = "-2500px";
nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换
list.style.transition = "left "+speed+"s";
move(500);
nowP--;
judge = null;
},speed*1000);
}
};
next.onclick=function(){
if(!judge){
judge = setTimeout(function(){
if(nowP==5){setTimeout(function(){
list.style.transition="left 0s";
list.style.left = "-500px";
nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换
list.style.transition = "left "+speed+"s";
move(-500);
nowP++;
judge = null;
},speed*1000);
}
};
function move(num){
var term = parseInt(list.style.left) + num ;
list.style.left = term+"px";
}
var roll= setInterval(function(){
next.onclick();
},2000);
container.onmouseenter=function(){
clearInterval(roll);
};
container.onmouseleave=function()
{
roll=setInterval(function(){
next.onclick();
},2000);
};
};Ce qui suit est une démo de démonstration En termes simples, le principe est de définir une exécution différée au démarrage de l'animation lors du passage au début et à la fin de. la table d'images.La fonction setTimeout dont le temps est le même que le temps de transition de l'animation est utilisée pour effectuer une commutation instantanée, puis la limitation est utilisée pour garantir la vitesse de commutation maximale (vitesse).
Je suis également débutant en front-end, si cela peut vous aider, merci de cliquer sur la recommandation
Recommandations associées :
Roue d'images Bootstrap Comment implémenter l'effet de diffusion
Un exemple d'utilisation de JS pour implémenter un carrousel d'images
Implémentation de carrousel simple et pratique de JQuery méthode
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!