Maison > Article > interface Web > Explication détaillée du code permettant d'utiliser javascript pour implémenter des modifications d'image à l'aide de niveaux hiérarchiques

Explication détaillée du code permettant d'utiliser javascript pour implémenter des modifications d'image à l'aide de niveaux hiérarchiques

伊谢尔伦original: 2018-05-11 16:10:542584parcourir

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 réaliser

Tout d'abord, nous pouvons ajouter un p au corps et définir la largeur en pourcentage (page adaptative), si la proportion est spécifique à quel pourcentage, elle doit être faite en fonction des besoins, je n'entrerai pas dans les détails ici. Mettez l'image à la p.

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. Utiliser le niveau de la hiérarchie pour changer l'image du haut

Venez directement au code pour en savoir plus point intuitif : Basique Chaque ligne est commentée

<!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>
<p 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="" />
</p>
<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>

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：Explication détaillée de la définition de fonction et de la différence entre déclaration et expression en JavaScriptArticle suivant：Explication détaillée de la définition de fonction et de la différence entre déclaration et expression en JavaScript

Articles Liés

Voir plus