Faire sauter les images javascript carrousel d'images effect

Faire sauter les images javascript carrousel d'images effect_javascript skills

WBOY

Libérer： 2016-05-16 15:15:16

original

1708 Les gens l'ont consulté

L'effet carrousel d'images est presque un effet incontournable sur la page d'accueil du site actuel. Je vais donc expliquer la mise en œuvre simple de cet effet sous trois aspects.

L'image saute
Mise en place du contrôle de séquence d'images
Mise en place de la commande des boutons avant et arrière

Dans cet article, regardons les images changeant en fonction de l'intervalle.

Complétons d'abord le code de structure, je ne l'expliquerai pas en détail. Voyons l'effet

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一张</a>
    <a href="#">下一张</a>
  </div>
</body>
</html>

Copier après la connexion

D'accord, contrôlons maintenant le saut d'image via JS.

Nous devons d'abord trouver l'emplacement de l'image. Ici, nous utilisons ul pour la mise en page, nous devons donc d'abord trouver le numéro de LI sous UL

Ensuite, laissez les images s'afficher une par une. Nous avons utilisé le mode fenêtre, qui est le mode calque de masque. #slider est une fenêtre, ul est le paysage à l'extérieur de la fenêtre et le paysage ul est disposé horizontalement

Ensuite, le paysage extérieur est affiché selon la taille de la fenêtre, c'est-à-dire que chaque image est utilisée à chaque fois comme décor de fenêtre. Ici, la taille de l'image est contrôlée pour être de la même taille que la fenêtre.<🎜. >

Ce qui précède explique un concept, à savoir le traitement de la mise en page. Ensuite, nous contrôlons JS. Pour obtenir différents intervalles d'affichage des images, nous devons utiliser setInterval ou setTimeout de JS (car c'est facile à obtenir). vers le haut.)

A chaque fois qu'on saute, on contrôle la gauche de la position de UL, pour que le décor sous ul puisse être affiché différemment à chaque fois, et cette gauche est déterminée en fonction de la largeur de la fenêtre La première image Bien sûr à gauche. est -800 * 0, le deuxième est -800*1, le troisième est -800*2... et ainsi de suite. Nous pouvons alors obtenir le code suivant

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

Copier après la connexion

Le code JS semble très simple comme ceci. Ici, je définis une séquence de sauts de 2 secondes, puis une fois que le nombre de sauts est supérieur ou égal au nombre d'images, je le laisse revenir à la première image.

J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.