Der einfachste und kleinste Schieberegler der Welt
Als damaliger Layout-Designer habe ich die Funktionsweise von Plugins perfekt verstanden und mich immer wieder neugierig im Front-End umgesehen, um eine Minimierung des Codes zu erreichen und die Arbeit mit CSS oder demselben Layout zu optimieren.
Der Schieberegler wurde nach einigen Experimenten mit dem Z-Index geboren und zu meiner Überraschung bestand das Programm nur aus 10 Zeilen. Ich habe die Bilder nicht in Hintergrundbilder umgewandelt und die Möglichkeit gelassen, durch gleichmäßige Layoutblöcke zu scrollen.
Hier ist der HTML-Code für den Szenencontainer:
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
Fügen wir etwas CSS hinzu, das die Bild-Tags bei X: 0 und Y: 0 (oben: 0px und links: 0px) in ein Deck lädt:
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
Ich verwende keine statischen Werte wie PX mehr im Layout, da Monitore mit 8 KB und mehr angezeigt werden. Ich mache jedoch alles mit skalierbaren Ansichtsanschlusseinheiten, wodurch ich bei jeder Bildschirmauflösung die Treppe zu Medienabfragen und Designschnittstellen vermeiden kann.
Schreiben wir nun einen JavaScript-Handler, der einfach ohne Auswirkungen mit einem Zeitintervall durch das Deck blättert:
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
Wir verwenden setInteval, um bei der Initialisierung 3 Sekunden lang zu saugen und einen zurücksetzbaren Iterator in einer Pseudoschleife zu implementieren. Ändern Sie bei jedem nächsten Tick des Timers den Z-Index des gewünschten Bildes in der angegebenen Reihenfolge. Der Z-Index des vorherigen Bildes wird dauerhaft auf 0 zurückgesetzt, und das aktuelle Schleifenelement wird nach vorne gebracht, indem der Z-Index auf 1 gesetzt wird.
Das war's. Der einfachste und kleinste Schieber der Welt ist bereit, zuverlässig und elementar wie ein Kalaschnikow-Sturmgewehr. Jetzt tickt das ganze Deck und das aktuelle Pseudo-Loop-Element tritt in den Vordergrund. In reinem JavaScript funktioniert alles ohne Dritte.
Effekte hinzufügen
Der Rotor (wie ich ihn nannte) kam zu einfach heraus und ich wollte einige Übergangseffekte hinzufügen. Dazu müssen Sie bereits eine Bibliothek verwenden, die weiß, wie CSS mit coolen Lockerungseffekten animiert wird (es gibt 43 davon in RevolveR).
Hier ist die Auflistung:
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
Hier wird eine Rückrufsequenz implementiert, um den Status der Animation zu vervollständigen, die in der Gesamtzeit während des Timer-Typs setInterval passt, und wir erhalten coole Übergänge mit Fading und Flackern.
Alles ist in Ordnung, aber wir werden auch eine Verzögerung hinzufügen, indem wir das Flag umdrehen, wenn sich der Zeiger über der Bühne befindet:
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
Rotor von RevolveR Labs in Aktion
Siehe den Rotor in Aktion hier .
Wie Sie sehen, gibt es auch hier nicht so viel Code, und komplexere und interessantere Effekte können implementiert werden. Aber das liegt an dir.