Javascript implementiert den Bildkarusselleffekt (1) Erstellen Sie Bilder mit Jump_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:15:13

Original

1305 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.