Maison >interface Web >js tutoriel >Implémentation simple du graphique carrousel d'événements js click

Implémentation simple du graphique carrousel d'événements js click

高洛峰original: 2017-01-21 09:32:291276parcourir

Les images carrousel sont encore relativement courantes dans les applications futures et ne nécessitent pas beaucoup de lignes de code pour être implémentées. Mais lorsque vous ne maîtrisez que les connaissances de base de js, comment pouvez-vous utiliser moins de méthodes logiquement simples pour y parvenir ? Analysons plusieurs approches différentes :

1. Utilisez la méthode de déplacement pour obtenir

Tout d'abord, nous pouvons ajouter un div au corps et définir la largeur sur un pourcentage (page adaptative), si le le ratio est spécifique au pourcentage de qui, il se fera en fonction des besoins, je n'entrerai pas dans les détails ici. Mettez l'image dans un div.

Deuxièmement, dans la partie style, définissez toutes les balises img sur absolues ; pour faciliter le positionnement

Enfin, la partie js parle de la logique et définit deux tableaux vides. Le premier tableau est utilisé pour. enregistre les images initiales affichées sur la page et les images en attente d'entrée, le deuxième tableau enregistre les n images restantes, en supposant que ces deux tableaux sont définis sur : waitToShow=[] et goOut=[]; ; affiche le premier Si une image est nommée showFirst et que le déplacement et le temps de mouvement sont définis pour l'image showFirst, une fois l'exécution terminée, showFirst est placé à la fin de goOut : goOut.push(showFirst); , le 0ème élément du tableau waitToShow devient la deuxième image A d'origine à afficher, définissez le temps de déplacement et de mouvement pour waitToShow[0] de cette image, et affichez la première image d'élément du tableau goOut, et placez-la à la place fin du tableau waitToShow pour garantir que le tableau waitToShow est toujours une image affichée et une image à afficher, formant ainsi une boucle à travers deux tableaux pour terminer la mise en œuvre de l'image carrousel. La logique inverse est la même (déconseillée ici car la logique est trop compliquée)

2. Utilisez le niveau de la hiérarchie pour changer l'image du haut (cette méthode n'a pas d'action de déplacement, mais la logique est très simple . Très pratique)

Venez directement au code pour un point plus intuitif : en gros, chaque ligne a un commentaire

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 (闪现 自适应)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
background: red;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
/*z-index: 10;*/
}
input {
border: 1px solid lightgray;
width: 50px;
height: 30px;
background: red;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
</div>
<input type="button" id="butLeft" name="name" value="◀︎">
<input type="button" id="butRight" name="name" value="▶︎">
</body>
<script type="text/javascript">
// 获取images元素生成字符串数组，字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中，后面有定义
var images = document.getElementsByTagName(&#39;img&#39;);
var butLeft = document.getElementById(&#39;butLeft&#39;);
var butRight = document.getElementById(&#39;butRight&#39;);
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组，用来存放images里面的字符串元素
var imagess = [];
 
// for循环用来给imagess数组赋值，并且改变数组中的元素的层级
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置
// 要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下
currentImage.style.zIndex = -i;
}
 
// 设置计数器count，执行一次点击事件（向左或者向右）count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级，即 －1000+count，
// 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1，不用考虑具体的值，只需要有点击事件加 1
count++;
}
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素，并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
count++;
}
</script>
</html>

L'article de base js à lire absolument ci-dessus (implémentation simple de l'événement click carrousel chart) est L'éditeur a partagé tout le contenu avec vous. J'espère qu'il pourra vous donner une référence. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'implémentation simple du diagramme de carrousel d'événements js Click et des articles connexes, veuillez faire attention au site Web PHP 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：Une brève analyse de la compréhension des fonctions dans JSArticle suivant：Une brève analyse de la compréhension des fonctions dans JS

Articles Liés

Voir plus