Javascript implémente l'effet carrousel d'images (1) Rendre les images jump

Javascript implémente l'effet carrousel d'images (1) Rendre les images jump_javascript skills

WBOY

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

original

1325 Les gens l'ont consulté

L'effet carrousel d'images est visible sur la page d'accueil de tous les principaux sites Web et est relativement courant. L'éditeur ci-dessous partagera avec vous la mise en œuvre simple de cet effet.

1. L'image saute

Mise en place du contrôle de séquence d'images

3. 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, et je ne l'expliquerai pas en détail. Laissez-moi d'abord vous montrer le rendu :

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 de l'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 comme décor de chaque 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.

Le contenu ci-dessus est l'introduction de l'éditeur à Javascript pour implémenter l'effet carrousel d'images (1) pour faire sauter les images. J'espère que cela sera utile à tout le monde.