Maison >interface Web >js tutoriel >Exemple de code Javascript pour obtenir un effet de défilement transparent de plusieurs images vers la gauche et la droite

Exemple de code Javascript pour obtenir un effet de défilement transparent de plusieurs images vers la gauche et la droite

黄舟original: 2017-03-22 14:26:331705parcourir

Cet article présente principalement l'exemple de javascript obtenant un effet de défilement transparent de plusieurs images vers la gauche et la droite. A une très bonne valeur de référence. Jetons un coup d'oeil avec l'éditeur.

Structure : la boîte contient ul, ul contient 4 li ; ul est positionné de manière absolue.

Copier li-1 et li-2 à la fin de li-4 Afin de les distinguer de li-1 et li-2, le contenu est modifié en li-5 et li-. 6, et la couleur reste inchangée. À l'heure actuelle, ul contient 6 li.

Il est à noter que la grosse case ul est déplacée au lieu de li.

Principe : Lorsque la valeur gauche du positionnement absolu de ul est égale à la largeur de (li-1+li-2+li-3+li-4), utilisez Javascript pour restaurer rapidement la valeur de gauche à 0.

Veuillez faire attention aux changements de chiffres et de couleurs à l'intérieur de la boîte en ce moment !

Rendu :

Exemple de code Javascript pour obtenir un effet de défilement transparent de plusieurs images vers la gauche et la droite

Exemple de code :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style media="screen">
  *{
   padding: 0;
   margin: 0;
  }
  ul,li {
   list-style: none;
  }
  img {
   vertical-align: top;
  }
  #box{
   width: 400px;
   height: 100px;
   margin: 100px auto;
   background-color: pink;
   position: relative;
   overflow: hidden;
  }
  #box ul {
   width: 2000px;
   position: absolute;
   left: 0;
   top: 0;
  }
  #box li {
   float: left;
  }
  .aa {
   width: 200px;
   height: 100px;
  }
  .li-1{
   background-color: #f6e659;
  }
  .li-2{
   background-color: #57fa4f;
  }
  .li-3{
   background-color: #3a8ef1;
  }
  .li-4{
   background-color: #c057f1;
  }
 </style>
</head>
<body>
 <p id="box">
  <ul>
   <li class="li-1 aa">li-1</li>
   <li class="li-2 aa">li-2</li>
   <li class="li-3 aa">li-3</li>
   <li class="li-4 aa">li-4</li>
   <li class="li-1 aa">li-5</li>
   <li class="li-2 aa">li-6</li>
  </ul>
 </p>
</body>
</html>
<script type="text/javascript">
 var box = document.getElementById("box");
 var ul = box.children[0];
 var num = 0;
 timer = setInterval(fn,10);
 function fn() {
  num--;
  num <= -800 ? num = 0 : num;
  ul.style.left = num + "px";
 }
</script>

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：Introduction détaillée à trois façons d'effacer des tableaux en JavaScriptArticle suivant：Introduction détaillée à trois façons d'effacer des tableaux en JavaScript

Articles Liés

Voir plus