Maison > Article > interface Web > 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:331601parcourir
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 :
<!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!