recherche

Maison >interface Web >js tutoriel >Comment implémenter des effets carrousel simples avec JS ? (Explication détaillée avec images et texte)

Comment implémenter des effets carrousel simples avec JS ? (Explication détaillée avec images et texte)

青灯夜游
青灯夜游avant
2020-06-12 10:14:035132parcourir

Comment implémenter des effets carrousel simples avec JS ? (Explication détaillée avec images et texte)

L'exemple de cet article partage avec vous le code spécifique pour implémenter l'effet carrousel avec JS pour votre référence

Connaissances. points

Idée d'image de carrousel :

① Créez un index de variable globale pour toujours marquer l'image actuellement affichée.
② Créez dynamiquement l'indicateur d'image ci-dessous en fonction du nombre actuel d'images.
③ L'état initial de l'image du carrousel est que la première image est au milieu et toutes les images restantes sont placées à la position où l'image sera affichée.
④ Lorsque vous cliquez sur >, l'image actuelle appelle la fonction de mouvement d'animation pour se déplacer vers la gauche. En même temps, la nouvelle image appelle la fonction d'animation pour se déplacer vers p, et l'image affichée suivante sera déplacée vers la gauche. à droite du côté p.
⑤ Un jugement des limites est requis. Si l'image actuelle est supérieure au nombre d'images ou inférieure ou égale à 0, réaffectez l'index.
⑥ Lorsque l'on clique sur l'indicateur d'image, la relation de position entre le clic et l'index est d'abord déterminée, puis le mouvement d'animation est effectué.
⑦ Ajoutez une minuterie à p pour déplacer automatiquement les images. Lorsque la souris entre dans p, la minuterie est supprimée. Lorsque la souris sort de p, la minuterie est réglée.

Effet de fonctionnement

1. Carrousel automatique
2. Cliquez à gauche et à droite pour changer d'image
3. Cliquez sur l'indicateur d'image ci-dessous pour changer d'image

. 🎜>

Code

Présentation de la bibliothèque MyTools.js

1.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="1.css" rel="external nofollow" >
</head>
<body>
<div id="box">
 <div id="box_content">
 <div><img src="casual01.jpg" alt=""></div>
 <div><img src="casual02.jpg" alt=""></div>
 <div><img src="casual03.jpg" alt=""></div>
 <div><img src="casual04.jpg" alt=""></div>
 <div><img src="casual05.jpg" alt=""></div>
 </div>
 <div id="box_control">
 <a href="javascript:;"><i><</i></a>
 <a href="javascript:;"><i>></i></a>
 <ul>
 </ul>
 </div>
</div>
<script src="../JavaScript学习/00MyTools/MyTools.js"></script>
<script src="1.js"></script>
</body>
</html>

2. css

*{margin: 0;padding: 0;}
a{
 color: #999;
 text-decoration: none;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, .4);
}
a:hover{
 color: #f8b62b;
}
i{
 font-size: 50px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#box{
 height: 482px;
 width: 830px;
 background-color: red;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 overflow: hidden;
}
#box_content{
 height: 100%;
 width: 100%;
 cursor: pointer;
}
#box_content img{
 position: absolute;
 vertical-align: top;
 height: 100%;
 width: 100%;
 /*left: 830px;*/
}
.box_img{
 width: 100%;
 height: 100%;
 position: absolute;}
.box_control_right{
 position: absolute;
 right: 0;
}
.box_control_left{
 position: absolute;
 left: 0;
}
ul{
 position: absolute;
 bottom: 30px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 justify-content:space-evenly;
}
ul>li{
 list-style: none;
 width: 16px;
 height: 16px;
 background-color: #fff;
 margin: 0 3px;
 border-radius: 50%;
 cursor: pointer;
}
ul>li.current{
 background-color: darkorange;
}

3.js

window.addEventListener(&#39;load&#39;,function (ev) {
 // 轮播图
 (function () {
 // 1. 获取需要标签
 var boxContent = myTool.$(&#39;box_content&#39;);
 var contentImg = boxContent.children;
 var boxControl = myTool.$(&#39;box_control&#39;);
 var controlBottom = boxControl.children[2];
 // 2. 全局索引
 var iNow = 0;
 // 3. 根据图片个数动态添加下方图片指示器
 for (var i = 0; i < contentImg.length; i++) {
 var li = document.createElement(&#39;li&#39;);
 controlBottom.insertBefore(li,controlBottom.children[0]);
 }
 // 4. 让第一个图片指示器选中
 controlBottom.children[0].className = &#39;current&#39;;
 // 5. 让除了第一张图片以外所有图片进入待显示区域
 var scrollImgWidth = boxContent.offsetWidth;
 for (var j = 1; j < contentImg.length; j++) {
 contentImg[j].style.left = scrollImgWidth + &#39;px&#39;;
 }
 // 6. 处理左右两侧点击
 var cPrev = boxControl.children[0];
 var cNext = boxControl.children[1];
 // 6.1 点击左边
 cPrev.addEventListener(&#39;click&#39;,function (evt) {
 // 1. 当前可视区域图片快速右移
 // 2. 上一张幻灯片出现在可视区域左侧
 // 3. 让这张幻灯片做动画进入
 myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:scrollImgWidth},null);
 iNow--;
 // 边界处理
 if (iNow < 0){
 iNow = contentImg.length - 1;
 }
 contentImg[iNow].style.left = -scrollImgWidth + &#39;px&#39;;
 myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:0},null);
 // 切换索引
 changeIndex();

 },false);
 // 6.2 点击右边
 cNext.addEventListener(&#39;click&#39;,function (evt) {
 autoPlay();
 },false);
 // 7. 下侧图片指示器操作
 for (var k = 0; k < controlBottom.children.length; k++) {
 // 取出单个li标签
 var bottomLi = controlBottom.children[k];
 // 监听鼠标进入
 (function (index) {
 bottomLi.addEventListener(&#39;mouseover&#39;,function (evt) {
  // 比较当前索引和点击指示器位置关系
  if (index > iNow){
  myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:-scrollImgWidth},null);
  contentImg[index].style.left = scrollImgWidth + &#39;px&#39;;
  }else if(index < iNow){
  myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:scrollImgWidth},null);
  contentImg[index].style.left = -scrollImgWidth + &#39;px&#39;;
  }
  iNow = index;
  myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:0});
  // 切换索引
  changeIndex();
 },false);
 })(k)
 }

 /**
 * 切换索引操作
 */
 function changeIndex() {
 for (var i = 0; i < controlBottom.children.length; i++) {
 controlBottom.children[i].className = &#39;&#39;;
 }
 // 当前的被选中
 controlBottom.children[iNow].className = &#39;current&#39;;
 }

 /**
 * 点击右侧和图片自动运动操作
 */
 function autoPlay(){
 // 1. 当前可视区域图片快速左移
 // 2. 下一张图片出现在可视区域右侧
 // 3. 让这张图片做动画进入
 myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:-scrollImgWidth},null);
 iNow++;
 // 边界处理
 if (iNow >= contentImg.length) {
 iNow = 0;
 }
 contentImg[iNow].style.left = scrollImgWidth + &#39;px&#39;;
 myTool.slowMoving(contentImg[iNow], {"left": 0},null);
 // 切换索引
 changeIndex();
 }

 // 8. 设置定时器
 var timerId = setInterval(autoPlay,2000);
 // 9. 鼠标进入图片p后设置和清除定时器
 myTool.$(&#39;box&#39;).addEventListener(&#39;mouseover&#39;,function () {
 clearInterval(timerId);
 });
 myTool.$(&#39;box&#39;).addEventListener(&#39;mouseout&#39;,function () {
 timerId = setInterval(autoPlay,2000);
 });

 })();
},false);

Pour plus d'effets spéciaux js, veuillez passer à la colonne téléchargement d'effets spéciaux js.

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!

css3 全局变量 JS
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment obtenir de superbes effets de feux d'artifice 3D avec JS ? (exemple de code)Article suivant：Comment obtenir de superbes effets de feux d'artifice 3D avec JS ? (exemple de code)

Articles Liés

Voir plus