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>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
