Maison > Article > interface Web > js implémentation de l'effet carrousel d'images compétences code_javascript

js implémentation de l'effet carrousel d'images compétences code_javascript

WBOYoriginal: 2016-05-16 15:32:431412parcourir

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 l'index numérique et ul pour la liste d'images, définissez la variable pour la minuterie et l'index variable pour stocker l'index actuel
2. Ajoutez une minuterie, incrémentez l'index toutes les 2 secondes et appelez la fonction de commutation d'image
Conseils :
1. L'indice ne peut pas continuer à augmenter sans limite, et un jugement doit être fait
2. Lors de l'appel de la fonction switch 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. Recherchez 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 pour qu'elle soit égale à la valeur du paramètre transmis
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, quittez et continuez
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 contenant des nombres, ajoutez-leur des index et passez aux images correspondantes lorsque la souris survole.
Lorsque la souris glisse, 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('wrap'),
  pic=document.getElementById('pic').getElementsByTagName("li"),
  list=document.getElementById('list').getElementsByTagName('li'),
  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>
 <div class="wrap" id='wrap'>
 <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>
 </div>
</body>
</html>

Ce qui précède est l'intégralité du contenu de cet article. J'ai partagé avec vous le code d'implémentation de l'effet carrousel d'images js. J'espère que vous l'aimerez. Vous pouvez modifier les images selon vos propres préférences et créer votre propre effet carrousel d'images.

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：Parler de la compréhension des compétences offsetleft compatibilité_javascriptArticle suivant：Parler de la compréhension des compétences offsetleft compatibilité_javascript

Articles Liés

Voir plus