Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des Codes zur Verwendung von Javascript zur Implementierung von Bildänderungen mithilfe hierarchischer Ebenen

Ausführliche Erläuterung des Codes zur Verwendung von Javascript zur Implementierung von Bildänderungen mithilfe hierarchischer Ebenen

伊谢尔伦Original: 2018-05-11 16:10:542576Durchsuche

Karussellbilder sind in zukünftigen Anwendungen immer noch relativ häufig und erfordern nicht viele Codezeilen für die Implementierung. Aber wenn Sie nur die Grundkenntnisse von js beherrschen, wie können Sie dann weniger und logisch einfache Methoden verwenden, um dies zu erreichen? Lassen Sie uns verschiedene Ansätze analysieren:

1 Verwenden Sie die Verschiebungsmethode, um

Zuerst können wir dem Körper ein p hinzufügen und die Breite als Prozentsatz festlegen (Adaptive Seite). Wenn der Anteil spezifisch für dessen Prozentsatz ist, sollte dies entsprechend den Anforderungen erfolgen. Ich werde hier nicht näher darauf eingehen. Platziere das Bild auf S.

Zweitens setzen Sie im Stilteil alle IMG-Tags auf „absolut“, um die Positionierung zu erleichtern.

Schließlich geht es im js-Teil um die Logik und definiert zwei leere Arrays Speichern Sie die ersten Bilder, die auf der Seite angezeigt werden, und die Bilder, die auf die Eingabe warten. Das zweite Array speichert die verbleibenden n Bilder, vorausgesetzt, diese beiden Arrays sind auf: waitToShow=[] und goOut=[]; ; öffnet das erste Bild. Wenn ein Bild den Namen showFirst trägt und die Verschiebung und die Bewegungszeit für das showFirst-Bild festgelegt sind, wird showFirst nach Abschluss der Ausführung am Ende von goOut platziert: goOut.push(showFirst); , das 0. Element des waitToShow-Arrays wird zum ursprünglichen zweiten A-Bild, das angezeigt werden soll. Legen Sie die Verschiebung und Bewegungszeit für waitToShow[0] dieses Bildes fest, öffnen Sie das erste Elementbild des goOut-Arrays und platzieren Sie es an der Das Ende des WaitToShow-Arrays stellt sicher, dass das WaitToShow-Array immer ein angezeigtes Bild und ein anzuzeigendes Bild ist. Dadurch wird eine Schleife durch zwei Arrays gebildet, um die Implementierung des Karussellbilds abzuschließen. Die umgekehrte Logik ist dieselbe (hier nicht empfohlen, da die Logik zu kompliziert ist)

2. Verwenden Sie die Ebene der Hierarchie, um das obere Bild zu ändern

Gehen wir direkt zum Code für a intuitiverer Punkt: Basic Jede Zeile ist kommentiert

<!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>

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Codes zur Verwendung von Javascript zur Implementierung von Bildänderungen mithilfe hierarchischer Ebenen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Funktionsdefinition und des Unterschieds zwischen Deklaration und Ausdruck in JavaScriptNächster Artikel：Detaillierte Erläuterung der Funktionsdefinition und des Unterschieds zwischen Deklaration und Ausdruck in JavaScript

In Verbindung stehende Artikel

Mehr sehen