suchen
HeimWeb-Frontendjs-TutorialNative JS implementiert ein Bildkarussell-Plug-in im Karussellstil

Ich habe selbst drei Bildkarussells geschrieben, eines ist mit einfachem nativem JS ohne Animationseffekte implementiert und das andere ist mit JQuery implementiert und wechselt zwischen Ein- und Ausblendungen. Jetzt möchte ich ein cooleres machen und es auf meinem Blog oder meiner persönlichen Website veröffentlichen, damit ich meine Arbeit präsentieren kann. Ich habe die MOOC-Website durchsucht und einen Carousel-JQuery-Plug-In-Kurs gefunden, der etwas cool war, also habe ich darüber nachgedacht, ihn mit nativem JS zu kapseln. Erst als ich damit anfing, wurde mir klar, dass es nicht so einfach war, wie ich dachte. . . Lassen Sie uns ohne weitere Umschweife den Implementierungsprozess erklären.

2. Wirkung

Weil mein Server noch nicht fertig ist. Es gibt keine Online-Demonstration (ORZ...), daher kann ich nur ein Rendering einstellen.

Native JS implementiert ein Bildkarussell-Plug-in im Karussellstil

Sie können den ungefähren Effekt immer noch auf dem Bild sehen, daher werde ich nicht mehr sagen. Wenn Sie den tatsächlichen Codeeffekt sehen möchten, können Sie den Code gerne auf meinem Github herunterladen. Vergessen Sie nicht, meinem Github-Projekt einen Stern zu geben ^_^

3 🎜>

HTML-Struktur


<div class="carrousel-main" data-setting=&#39;{"width":1000,"height":400,
 "carrouselWidth":750,
 "carrouselHeight":400,
 "scale":0.9,
 "verticalAlign":"middle"}&#39;>
 <div class="carrousel-btn carrousel-btn-pre"></div>
 <ul class="carrousel-list">
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="Native JS implementiert ein Bildkarussell-Plug-in im Karussellstil" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="Native JS implementiert ein Bildkarussell-Plug-in im Karussellstil" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="Native JS implementiert ein Bildkarussell-Plug-in im Karussellstil" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="Native JS implementiert ein Bildkarussell-Plug-in im Karussellstil" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"   alt="Native JS implementiert ein Bildkarussell-Plug-in im Karussellstil" ></a>
 </ul>
 <div class="carrousel-btn carrousel-btn-next"></div>
 </div>
Diese Struktur ist die gleiche wie die HTML-Codestruktur des allgemeinen Karussells. Der kleine Unterschied besteht darin, dass das Hauptkarussell-Div ein Datenelement hat. Einstellungsattribut darauf. Zu den Eigenschaften gehören einige Parameter des Karusselleffekts. Die konkrete Bedeutung der Parameter wird später erläutert.

Ich werde den Code für den CSS-Teil nicht veröffentlichen. Das Wichtigste ist, auf die absolute Positionierung der Elemente zu achten unterschiedlich, daher werden diese über js gesteuert, sodass eine absolute Positionierung erforderlich ist. Das Folgende konzentriert sich auf den js-Implementierungsprozess.

JS-Implementierungsprozess

Lassen Sie uns über einige wichtige Schritte von JS sprechen. Nach Abschluss dieser Schritte sollte es keine Schwierigkeiten geben.

①Standardparameter

Da es sich um ein Paket-Plug-in handelt, wird es definitiv einige Standardwerte von Parametern geben, die vorhanden sein müssen konfiguriert. In diesem Plug-In lauten die Hauptparameter wie folgt:

width:1000, //Die Breite des Folienbereichs
height:400, //Die Höhe des Folienbereichs
carrouselWidth:700, //Die Rahmenbreite der ersten Folie
carrouselHeight:400, //Höhe des ersten Rahmens der Folie
scale:0.9,//Zeichnen Sie das Verhältnis der Anzeigeproportionen auf, z. B. wie viel kleiner die Breite und Höhe von ist Das zweite Bild wird mit dem ersten Bild verglichen.
autoPlay:true,//Ob automatisch abgespielt werden soll
timeSpan:3000,//Zeitintervall für automatische Wiedergabe
VerticalAlign:'middle' //Bildausrichtung, dort Es gibt drei Möglichkeiten: topmiddlebottom, der Standardwert ist middle

②Encapsulation object

Da eine Website möglicherweise an mehreren Stellen dasselbe Karussell-Plug-in verwendet , Kapselung ist entscheidend. Wenn Sie nach der Definition dieses Objekts eine Initialisierungsmethode für das Objekt definieren, können Sie mehrere Objekte erstellen. Sie müssen nur das DOM derselben Klasse für alle Klassen übergeben. Meine Initialisierungsmethode lautet also wie folgt:


Carousel.init=function(carrousels){
 var _this=this;
 //将nodeList转换为数组
 var cals= toArray(carrousels); <br> /*因为原生JS获取所有的类,得到的是一个nodeList,是一个类数组,如果想要使用数组的方法则需要转化为真正的数组。这里toArray为转化方法。*/
 cals.forEach(function(item,index,array){
 new _this(item);
 });
 }
Wenn ich mich in diesem Fall in window.onload befinde, rufe ich Carrousel.init(document.querySelectorAll('.carrousel-main')) auf. ; So können Sie mehrere Karussells erstellen!

③Initialisieren Sie die Positionsparameter des ersten Frames

Weil sich die relevanten Parameter aller Frames nach dem ersten Frame auf den ersten Frame beziehen wird durch Frames definiert, daher ist es wichtig, den ersten Frame gut zu definieren.


setValue:function(){
this.carrousel.style.width=this.Settings.width+&#39;px&#39;;
this.carrousel.style.height=this.Settings.height+&#39;px&#39;;
 /*左右按钮设置,这里要让左右按钮平均地瓜分轮播区域宽减去第一帧宽度之后的区域,z-index要比除第一帧外所有图片都高,而图片刚好左右分放置,因此z-index的值就是图片数量的一半。*/
 var btnW=(this.Settings.width-this.Settings.carrouselWidth)/2;
 this.preBtn.style.width=btnW+&#39;px&#39;;
 this.preBtn.style.height=this.Settings.height+&#39;px&#39;;
 this.preBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 
 this.nextBtn.style.width=btnW+&#39;px&#39;;
 this.nextBtn.style.height=this.Settings.height+&#39;px&#39;;
 this.nextBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 //第一帧相关设置
 this.carrouselFir.style.left=btnW+&#39;px&#39;;
 this.carrouselFir.style.top=this.setCarrouselAlign(this.Settings.carrouselHeight)+&#39;px&#39;;
 this.carrouselFir.style.width=this.Settings.carrouselWidth+&#39;px&#39;;
 this.carrouselFir.style.height=this.Settings.carrouselHeight+&#39;px&#39;;
 this.carrouselFir.style.zIndex=Math.floor(this.carrouselItems.length/2);
},
Wenn es um das neue Objekt geht, gehen Sie hier zum Dom-Knoten, um die Dateneinstellungsparameter abzurufen, und aktualisieren Sie dann die Standardparameterkonfiguration. Hier ist etwas zu beachten: Beim Abrufen der Dom-Parameter können die Standardparameter nicht direkt durch Zuweisen von Werten aktualisiert werden, da beim Konfigurieren der Parameter möglicherweise nicht alle Parameter einmal konfiguriert werden. Wenn Werte direkt zugewiesen werden und der Benutzer nicht alle Parameter konfiguriert, gehen die Parameter verloren. Hier habe ich eine Objekterweiterungsmethode geschrieben, die der $.extend-Methode in JQuery ähnelt, um die Parameter zu aktualisieren. Ich werde sie nicht im Einzelnen auflisten, aber Interessierte können sie herunterladen.

④Andere Bildpositionseinstellungen

Die Bilder hier teilen die Bilder tatsächlich gleichmäßig nach links und rechts auf. Zwei, und das Die Bildposition auf der linken Seite unterscheidet sich von der auf der rechten Seite, daher müssen sie separat konfiguriert werden:


//设置右边图片的位置关系
var rightIndex=level;
rightSlice.forEach(function(item,index,array){
 rightIndex--;
 var i=index;
 rw=rw*carrouselSelf.Settings.scale;//右边的图片是按照scale比例逐渐变小的
 rh=rh*carrouselSelf.Settings.scale;
 
 item.style.zIndex=rightIndex;//越往右边z-index的值越小,可以用图片数量的一般逐渐递减
 item.style.width=rw+&#39;px&#39;;
 item.style.height=rh+&#39;px&#39;;
 item.style.opacity=1/(++i);//越往右边透明度越小<br>  //这里的gap计算方法为:轮播区域减去第一帧宽度,除2,再除左边或者右边的图片张数
 item.style.left=(constOffset+(++index)*gap-rw)+&#39;px&#39;;//left的值实际上就是第一帧的left+第一帧的宽度+item的间距减去item的宽度
 item.style.top=carrouselSelf.setCarrouselAlign(rh)+&#39;px&#39;;
});
Die Einstellungsmethode auf der linken Seite ist ähnlich und einfacher, daher werde ich nicht darauf eingehen ins Detail.

⑤ Passen Sie die Position und Größe aller Bilder während der Drehung an

Dieser Schritt ist sehr wichtig. Klicken Sie auf die Schaltfläche rechts, um sie zu drehen Klicken Sie auf die Schaltfläche links, um das nächste Bild nach links zu drehen. Zu diesem Zeitpunkt müssen wir nur alle Bilder als Ring anzeigen, einmal klicken, die Position einmal ändern und die Drehung abschließen. Wenn Sie nach links drehen, stellen Sie insbesondere sicher, dass die Parameter des zweiten Bildes denen des ersten Bildes, des dritten Bildes dem zweiten Bild und des letzten Bildes dem ersten Bild entsprechen. Wenn Sie nach rechts drehen, stellen Sie sicher, dass die Parameter des ersten Bilds denen des zweiten Bilds entsprechen, die Parameter des zweiten Bilds denen des dritten Bilds entsprechen ... und die Parameter des letzten Bilds denen des ersten Bilds entsprechen.

这里就说说左旋转吧

if(dir==&#39;left&#39;){
 toArray(this.carrouselItems).forEach(function(item,index,array){
 var pre;
 if(index==0){//判断是否为第一张
  pre=_this.carrouselLat;//让第一张的pre等于最后一张
  var width=pre.offsetWidth; //获取相应参数
  var height=pre.offsetHeight;
  var zIndex=pre.style.zIndex;
  var opa=pre.style.opacity;
  var top=pre.style.top;
  var left=pre.style.left;
 }else{
  var width = tempWidth;
  var height = tempHeight;
  var zIndex = tempZIndex;
  var opa = tempOpacity;
  var top = tempTop;
  var left = tempLeft;
 }
  //这里需要注意,因为第二张图片是参照第一张的,而这样改变的时候,第一张是首先被改变的,因此必须先把第一张的相关参数临时保存起来。
 tempWidth = item.offsetWidth;
 tempHeight = item.offsetHeight;
 tempZIndex = item.style.zIndex;
 tempOpacity = item.style.opacity;
 tempTop = item.style.top;
 tempLeft = item.style.left;
 
 item.style.width=width+&#39;px&#39;;
 item.style.height=height+&#39;px&#39;;
 item.style.zIndex=zIndex;
 item.style.opacity=opa;
 item.style.top=top;
  // item.style.left=left;
  animate(item,&#39;left&#39;,left,function(){//自定义的原生js动画函数
  _this.rotateFlag=true;
  });
 });
}

这里的旋转,如果不使用一些动画过度,会显得很生硬。但是原生JS并没有动画函数,这里我是自己写了一个模仿的动画函数。其原理就是获取dom原来的样式值,与新传入的值比较。用一些方法定义一个速度。我这里的速度就是用其差值除18.然定义一个计时器,参考了一下jquery源码里面的时间间隔为每13毫秒执行一次。然后才原来的样式值每次加上speed后等于传入的值的时候清楚计时器即可。具体可以看这里。

好啦,关键的地方都差不多啦,如果明白这些过程应该就很容易了!

四、总结思考

总结:

个人感觉这还是一个比较好理解的插件。如果能结合JQuery来做就相当简单了。但是用原生来写的话,还是有一些不那么流畅的感觉。应该是自定义动画比不上JQuery封装好的动画吧。

还有,这个插件因为图片需要平均分到左右两边,于是对于偶数数量的图片来说,这里用的方法是克隆第一张,然后加到最后,形成一个奇数。

思考:

如果说有bug的话,那就是我定义了一个rotateFlag的标志去判断当前能否旋转,就是预防快速点击的时候跟不上。我在按下的时候把rotateFlag设置为false,然后在动画结束后再把rotateFlag设置为true,但是好像作用并不明显,希望有关大神可以指教一下,大家共同进步。

更多编程相关知识,请访问:编程入门!!

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
JavaScript in Aktion: Beispiele und Projekte in realer WeltJavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleJavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Verständnis der JavaScript -Engine: ImplementierungsdetailsVerständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitPython vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Python gegen JavaScript: Community, Bibliotheken und RessourcenPython gegen JavaScript: Community, Bibliotheken und RessourcenApr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Von C/C nach JavaScript: Wie alles funktioniertVon C/C nach JavaScript: Wie alles funktioniertApr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

JavaScript -Engines: Implementierungen vergleichenJavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools