Maison >interface Web >js tutoriel >Comment créer un effet carrousel d'images avec js

Comment créer un effet carrousel d'images avec js

PHP中文网original: 2017-06-22 14:43:521706parcourir

Cet article présente principalement le code pour implémenter l'effet carrousel d'images js. L'article explique chaque étape en détail et note les précautions pour ouvrir la voie à une mise en œuvre fluide de l'effet carrousel d'images js. Amis intéressés par l'effet carrousel. Vous pouvez vous référer à

Tout d'abord, permettez-moi de jeter un œil à l'effet carrousel d'images js, comme indiqué ci-dessous

Idées spécifiques :

1. Chargez la page, obtenez le conteneur entier, tous les li pour les index numériques et les ul pour les listes d'images, définissez des variables pour les minuteries et un index de variable pour stocker le courant. index
2. Ajoutez une minuterie, incrémentez l'index toutes les 2 secondes et appelez la fonction de commutation d'image
Conseils :
1. augmenter sans limite. , il faut porter un jugement
2. Lors de l'appel de la fonction de changement d'image, vous devez passer l'index incrémenté en paramètre
3. Définir la fonction de changement d'image
Conseils :
1. Parcourez tous les li avec un index numérique et supprimez les classes sur chaque li.
2. Trouvez le li correspondant en fonction de la valeur d'index transmise, ajoutez-y une classe et définissez-le comme point culminant actuel.
3. Calculez la valeur supérieure de ul où l'image est placée en fonction de la valeur d'index transmise
4. Modifiez la valeur de l'index afin qu'elle soit égale à la valeur du paramètre transmise
Remarque : la valeur supérieure de ul où l'image est placée = -index*Hauteur d'une seule image (toutes les images doivent être de même hauteur)
4. Lorsque la souris se déplace sur tout le conteneur, l'image cesse de changer, quitte et continue
. Conseils :
1. Effacez le minuteur lorsque la souris glisse sur tout le conteneur
2. Continuez à exécuter le minuteur lorsque la souris part et passez à l'image suivante.
5. Parcourez tous les li avec des nombres et ajoutez-y des index, passez à l'image correspondante lorsque la souris survole.
Lorsque la souris glisse dessus, la fonction de changement d'image est appelée et l'index du li qui glisse est transmis.
Le code spécifique est le suivant :

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:170px;
 width:490px;
 margin:60px auto;
 overflow: hidden;
 position: relative;
 margin:100px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:170px;}
 .wrap ol{position:absolute;
 right:5px;
 bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
 background:#ccc;
 border:solid 1px #666;
 margin-left:5px;
 color:#000;
 float:left;
 line-height:center;
 text-align:center;
 cursor:pointer;}
 .wrap ol .on{background:#E97305;
 color:#fff;}

 </style>
 <script type="text/javascript">
 window.onload=function(){
 var wrap=document.getElementById(&#39;wrap&#39;),
 pic=document.getElementById(&#39;pic&#39;).getElementsByTagName("li"),
 list=document.getElementById(&#39;list&#39;).getElementsByTagName(&#39;li&#39;),
 index=0,
 timer=null;

 // 定义并调用自动播放函数
 timer = setInterval(autoPlay, 2000);

 // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function () {
 clearInterval(timer);
 }

 // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function () {
 timer = setInterval(autoPlay, 2000);
 }
 // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
 list[i].onmouseover = function () {
 clearInterval(timer);
 index = this.innerText - 1;
 changePic(index);
 };
 };

 function autoPlay () {
 if (++index >= pic.length) index = 0;
 changePic(index);
 }

 // 定义图片切换函数
 function changePic (curIndex) {
 for (var i = 0; i < pic.length; ++i) {
 pic[i].style.display = "none";
 list[i].className = "";
 }
 pic[curIndex].style.display = "block";
 list[curIndex].className = "on";
 }

 };

 </script> 
</head>
<body>
 <p class="wrap" id=&#39;wrap&#39;>
 <ul id="pic">
 <li><img src="1.jpg" alt=""></li>
 <li><img src="2.jpg" alt=""></li>
 <li><img src="3.jpg" alt=""></li>
 <li><img src="4.jpg" alt=""></li>
 <li><img src="5.jpg" alt=""></li> 
 </ul>
 <ol id="list">
 <li class="on">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </p>
</body>
</html>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser jQuery pour modifier dynamiquement les hyperliensArticle suivant：Comment utiliser jQuery pour modifier dynamiquement les hyperliens

Articles Liés

Voir plus