Cette fois, je vais vous donner une explication détaillée des étapes pour mettre en œuvre l'effet carrousel stay JS. Quelles sont les précautions pour mettre en œuvre l'effet carrousel stay JS. Voici un cas pratique, prenons un. regarder.
1. Idées
1. Le séjour du carrousel est très similaire au défilement sans fil, les deux utilisent des attributs et des variables pour contrôler le mouvement afin d'implémenter le carrousel ;
2. La différence est que le séjour du carrousel doit ajouter des attributs de transition et des minuteries pour obtenir l'effet de séjour du carrousel
Étapes ;
1. Écrivez le style structurel de base
Vous devez ajouter une image supplémentaire identique à la première à la fin pour éliminer la gigue lors du changement ; 🎜>
2. Ajoutez l'événement de séjour du carrousel Sur la base de la fondation précédente, ajoutez directement l'événement par défaut du cercle d'index à l'événement de séjour du carrousel
Remarque : lorsque le carrousel atteint ; la dernière, la transition doit être éliminée. Le minuteur setTimeout est utilisé ici. Il n'y aura aucun délai après la rotation de la dernière image de la carte, et elle passera directement à la première image puisque la première image est la même. comme dernière image, cela formera un angle mort visuel, qui ressemble à un effet carrousel continu
//轮播停留方法
function move() {
box.className = "box anmint";
circle[count].style.backgroundColor = "";
count++;
box.style.marginLeft = (-800 * count) + "px";
//最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
setTimeout(function () {
if (count >= 6) {
count = 0;
box.className = "box";
//marginLeft=0之前去除过渡属性
box.style.marginLeft = "0px";
}
circle[count].style.backgroundColor = "red";
}, 500);
}3 Ajoutez l'événement d'entrée dans le cercle d'index C'est fondamentalement la même chose que l'événement de fondu entrant et sortant du cercle d'index. La différence est qu'il n'est pas nécessaire de l'appeler ici événement Carousel stay, utilisez directement l'index actuel pour indexer afin que l'image suive la transformation. ; notez que la valeur
doit être marquée à la fin, de sorte que lorsque le comportement par défaut est à nouveau exécuté, le comportement par défaut sera exécuté à rebours en suivant l'image actuellement affichéecount=this.index
//进入索引圈事件
for(var j=0;j<circle.length;j++){
circle[j].index=j;
circle[j].onmouseenter=function(){
for(var k=0;k<circle.length;k++){
circle[k].style.backgroundColor="";
}
this.style.backgroundColor="red";
//图片跟随移动
box.className="box anmint";
box.style.marginLeft=(-800*this.index)+"px";
count=this.index;
}
}Rendu :
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS轮播停留效果</title>
<style>
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
.block{
width: 800px;
height: 400px;
margin: 80px auto;
position: relative;
border: 1px solid red;
overflow: hidden;
}
.box{
width: 5600px;
height: 400px;
float: left;
}
.anmint{
transition: all 0.5s ease-in-out;
}
img{
width: 800px;
height: 400px;
float: left;
}
.cir{
width: 150px;
height: 20px;
z-index: 7;
position: absolute;
bottom: 10px;
left: 320px;
}
.circle{
width: 10px;
height: 10px;
border: 2px solid grey;
border-radius: 50%;
float: left;
margin: 0 5px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementsByClassName("box")[0];
var count=0;
//索引圈事件
var circle=document.getElementsByClassName("circle");
circle[0].style.backgroundColor="red";
var time=setInterval(function(){
move();
},2000);
//鼠标进入事件
var block=document.getElementsByClassName("block")[0];
block.onmouseenter=function(){
clearInterval(time);
};
//鼠标离开事件
block.onmouseleave=function(){
time=setInterval(function(){
move();
},2000);
};
//进入索引圈事件
for(var j=0;j<circle.length;j++){
circle[j].index=j;
circle[j].onmouseenter=function(){
for(var k=0;k<circle.length;k++){
circle[k].style.backgroundColor="";
}
this.style.backgroundColor="red";
//图片跟随移动
box.className="box anmint";
box.style.marginLeft=(-800*this.index)+"px";
count=this.index;
}
}
//轮播停留方法
function move() {
box.className = "box anmint";
circle[count].style.backgroundColor = "";
count++;
box.style.marginLeft = (-800 * count) + "px";
//最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
setTimeout(function () {
if (count >= 6) {
count = 0;
box.className = "box";
//marginLeft=0之前去除过渡属性
box.style.marginLeft = "0px";
}
circle[count].style.backgroundColor = "red";
}, 500);
}
}
</script>
</head>
<body>
<p class="block">
<p class="box">
<img class="imgg" src="./image/box1.jpg">
<img class="imgg" src="./image/box2.jpg">
<img class="imgg" src="./image/box3.jpg">
<img class="imgg" src="./image/box4.jpg">
<img class="imgg" src="./image/box5.jpg">
<img class="imgg" src="./image/box6.jpg">
<img class="imgg" src="./image/box1.jpg">
</p>
<p class="cir">
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
</p>
</p>
</body>
</html>Lecture recommandée :
Explication détaillée de l'utilisation des expressions régulières sous Linux Implémentation de la fonction de sauvegarde d'images et les partager dans le cercle d'amis dans le mini programmeCe 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
