Heim > Artikel > Web-Frontend > Einfache Implementierung des JS-Click-Event-Karusselldiagramms

Einfache Implementierung des JS-Click-Event-Karusselldiagramms

高洛峰Original: 2017-01-21 09:32:291215Durchsuche

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

zu erreichen. Zuerst können wir dem Körper ein Div hinzufügen und die Breite auf einen Prozentsatz festlegen (adaptive Seite), wenn die Das Verhältnis ist spezifisch für dessen Prozentsatz und wird je nach Bedarf durchgeführt. Ich werde hier nicht auf Details eingehen. Fügen Sie das Bild in ein Div ein.

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 (diese Methode hat keine Verschiebungsaktion, aber die Logik ist sehr einfach , Sehr praktisch)

Kommen Sie direkt zum Code für einen intuitiveren Punkt: Im Grunde hat jede Zeile einen Kommentar

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

Der obige js-Basisartikel muss unbedingt gelesen werden (einfache Implementierung eines Klickereignisses). Karusselldiagramm) Der Herausgeber hat den gesamten Inhalt mit Ihnen geteilt. Ich hoffe, dass er Ihnen eine Referenz geben kann. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Informationen zur einfachen Implementierung von js Click-Event-Karusselldiagrammen und verwandten Artikeln finden Sie auf der chinesischen PHP-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：Eine kurze Analyse des Funktionsverständnisses in JSNächster Artikel：Eine kurze Analyse des Funktionsverständnisses in JS

In Verbindung stehende Artikel

Mehr sehen