Heim > Artikel > Web-Frontend > Javascript implementiert den Bildkarusselleffekt (1) Erstellen Sie Bilder mit Jump_Javascript-Fähigkeiten

Javascript implementiert den Bildkarusselleffekt (1) Erstellen Sie Bilder mit Jump_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:15:131306Durchsuche

Der Bildkarusselleffekt ist auf der Homepage aller großen Websites zu beobachten und relativ häufig. Der unten stehende Herausgeber wird Ihnen die einfache Implementierung dieses Effekts erläutern.

1. Das Bild springt

2. Implementierung der Bildsequenzsteuerung

3. Implementierung der vorderen und hinteren Tastensteuerung

In diesem Artikel schauen wir uns die Bilder an, die je nach Intervall wechseln.

Lass uns zuerst den Strukturcode vervollständigen. Ich werde ihn nicht im Detail erklären:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,ol,li{
list-style: none;
margin: 0;
padding: 0;
}
#slider{
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#slider ul{
width: 2400px;
position: relative;
}
#slider ul:after{
content: " ";
width: 0;
height: 0;
display: block;
}
#slider ul li{
float: left;
width: 800px;
height: 300px;
overflow: hidden;
}
#slider ul li img{
width: 100%;
}
#slider ol{
position: absolute;
bottom: 10px;
left: 46%;
}
#slider ol li{
display: inline-block;
}
#slider ol li a{
display: inline-block;
padding:4px 8px;
border-radius:15px;
background-color: #000;
color: #fff;
}
#slider .prev, #slider .next{
display: inline-block;
position: absolute;
top: 49%;
background-color: #000;
opacity: 0.6;
color: #fff;
padding: 3px;
}
#slider .prev{
left: 10px;
}
#slider .next{
right: 10px;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
</ul>
<ol>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
</ol>
<a href="#">上一张</a>
<a href="#">下一张</a>
</div>
</body>
</html>

Okay, jetzt steuern wir den Bildsprung über JS.

Zuerst müssen wir die Position des Bildes finden. Hier verwenden wir ul zum Layout, also müssen wir zuerst die Anzahl von LI unter UL finden

Dann werden die Bilder einzeln angezeigt. Dabei handelt es sich um den Maskenebenenmodus, ul ist die Szenerie außerhalb des Fensters und die Szenerie ul ist horizontal angeordnet

Dann wird die Außenszenerie in der Größe des Fensters angezeigt, d. h. jedes Bild wird als Szenerie jedes Fensters verwendet. Hier wird die Größe des Bildes auf die gleiche Größe wie das Fenster eingestellt.

Das Obige erklärt ein Konzept, nämlich die Layoutverarbeitung. Um unterschiedliche Anzeigeintervalle von Bildern zu erreichen, müssen wir setInterval oder setTimeout verwenden auf.)

Jedes Mal, wenn wir springen, steuern wir die linke Seite der UL-Position, sodass die Szenerie unter UL jedes Mal anders angezeigt werden kann, und diese linke Seite wird entsprechend der Breite des Fensters bestimmt. Das erste Bild ist natürlich links ist -800 * 0, der zweite ist -800*1, der dritte ist -800*2 ... und so weiter. Dann können wir den folgenden Code erhalten

<script>
(function(){
var slider = document.getElementById("slider");
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li");
var len = imglis.length;
var index = 0;
setInterval(function(){
if(index >= len){
index = 0;
}
imgul.style.left = - (800 * index) + "px";
index++;
},2000);
})();
</script>

Der JS-Code sieht ganz einfach so aus. Hier habe ich eine 2-Sekunden-Sprungsequenz festgelegt und dann, nachdem die Anzahl der Sprünge größer oder gleich der Anzahl der Bilder ist, zum ersten Bild zurückkehren lassen.

Der obige Inhalt ist die Einführung des Herausgebers in Javascript, um den Bildkarusselleffekt (1) zu implementieren, damit die Bilder springen. Ich hoffe, dass er für alle hilfreich ist.

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：Was genau ist Prototyp in Javascript? Javascript-TippsNächster Artikel：Was genau ist Prototyp in Javascript? Javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen