Heim >Web-Frontend >js-Tutorial >Eine kurze Analyse, wie man ein einfaches Karussell mit js implementiert
Eine kurze Analyse, wie man ein einfaches Karussell mit js implementiert
- **Original
- 2021-07-28 15:57:462450Durchsuche
Design-Idee: Verwenden Sie den Timer in js, um den Effekt eines Bilderkarussells zu erzielen, und legen Sie alle Bilder im IMG-Ordner ab. Ich habe jeweils drei Bilder gespeichert. Dann werden die drei Fotos in drei Divs eingeteilt. Die Anzeige und das Ausblenden jedes Divs wird durch einen Timer gesteuert. Das Div mit den drei Zahlen in der unteren linken Ecke gibt an, um welches Bild es sich handelt. Es sind also insgesamt drei div.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.imgbox{
width: 100%;
height:400px;
background-color: black;
transform: 1s;
}
.img{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:cover ;
}
.img0{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:100% ;
}
.img1{
width: 100%;
height:100%;
background-image: url(img/5572568_110213373115_2.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img2{
width: 100%;
height:100%;
background-image: url(img/5875f5fb7a8f8.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img3{
width: 100%;
height:100%;
background-image: url(img/980.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
ul{
margin-left:-30px ;
list-style-type: none;
position: relative;
margin-top: -100px;
line-height: 50px;
}
ul li{
float: left;
width: 50px;
height:50px;
border:1px solid #000000;
text-align: center;
background-color: aliceblue;
}
.div{
background-color: orange;
line-height: 50px;
}
.div1{
background-color: gainsboro;
line-height: 50px;
}
</style>
<script type="text/javascript">
var i=0;
function imgbox(){
i++;
if(i<4){
document.getElementById("img").className="img"+i;
if(i==1){
document.getElementById("one").className="div";
document.getElementById("two").className="div1";
document.getElementById("three").className="div1";
}
if(i==2){
document.getElementById("one").className="div1";
document.getElementById("two").className="div";
document.getElementById("three").className="div1";
}
if(i==3){
document.getElementById("one").className="div1";
document.getElementById("two").className="div1";
document.getElementById("three").className="div";
}
}
if(i==4){
i=0;
clearInterval('imgbox()');
}
}
setInterval('imgbox()',1000);
</script>
</head>
<body>
<div class="imgbox">
<div class="img" id="img"></div>
<ul id="ul">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
</div>
</body>
</html>HTML verstehen
HTML nennen wir Webseiten, und das Dateiformat von Webseiten ist das .html-Format. In unseren Augen handelt es sich um eine Hypertextsprache, die keiner zusätzlichen Kompilierung oder Verarbeitung bedarf. Einmal geschrieben und geöffnet, handelt es sich um eine Webseite.
Html besteht aus vielen Tags wie e388a4556c0f65e1904146cc1a846bee, c8b28895262a62371d18ac056c4442e2, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b... und einigen semantischen Tags wie 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d,ecb9802f417b0eccd9197cb5c877fca7.....
Was ist js:
js (JavaScript), eine wörtliche Skriptsprache. JavaScript-Skripte können direkt in der HTML-Sprache platziert und auf Browsern ausgeführt werden, die js unterstützen. Es wird häufig in der Webanwendungsentwicklung verwendet und häufig zum Hinzufügen verschiedener dynamischer Funktionen zu Webseiten verwendet, um Benutzern flüssigere und schönere Browsing-Effekte zu bieten. Wenn beim Durchsuchen einer Webseite ein bestimmter Vorgang ausgeführt wird, wird ein Ereignis generiert und ein in JavaScript geschriebenes Programm kann auf das entsprechende Ereignis reagieren.
js-Timer: Definieren Sie den Timer setInterval('imgbox()',1000); um die imgbox-Methode jede Sekunde auszuführen. Die imgbox-Methode umfasst Änderungen am Bild und der Farbe des Div
Aktivieren Sie den Timer
Das Fensterobjekt bietet zwei Methoden zum Implementieren des Timer-Effekts, nämlich window.setTimeout() und window.setInterval. Ersteres kann dazu führen, dass ein Codeabschnitt nach einer bestimmten Zeit ausgeführt wird, während Letzterer dazu führen kann, dass ein Codeabschnitt zu jedem angegebenen Zeitpunkt einmal ausgeführt wird. Ihre Prototypen sind wie folgt:
rrreeUnter ihnen kann der Code ein in Anführungszeichen eingeschlossener Code sein oder ein Funktionsname. Zum angegebenen Zeitpunkt ruft das System die Funktion automatisch auf Als aufrufendes Handle kann es keine Parameter annehmen. Wenn Sie eine Zeichenfolge verwenden, können Sie die zu übergebenden Parameter darin schreiben. Der zweite Parameter in beiden Methoden ist Millisekunden, der die Anzahl der Millisekunden angibt, um die die Ausführung verzögert oder wiederholt wird.
Die spezifische Schreibmethode ist wie folgt:
Funktionsname, ohne Parameter setTimeout (test,1000); string, ausführbarer Code setTimeout ('test()',1000); ,1000); Hinweis: Die Verwendung von setInterval ist die gleiche wie setTimeout
Rufen Sie die Funktion mit dem Parameter setTimeout ('test(parameter)',1000) auf;
div-Layout: Verwenden Sie ul, li für Layout
Ändern Sie den Stil wie folgt:
window.setTimeout(code,millisec); window.setInterval(code,millisec);
Html-Struktur:
ul{
margin-left:-30px ;//据左部边距
list-style-type: none;//去除默认ul样式
position: relative;//采用相对定位
margin-top: -100px;//据顶部边距
line-height: 50px;//行高
}
ul li{
float: left;//浮动
width: 50px;
height:50px;
border:1px solid #000000;//边框
text-align: center;//文字居中
background-color: aliceblue;
}Img ist ein großes Div-Feld, img ist ein Bild, ff6d136ddc5fdfeffaf53ff6ee95f185 enthält li, das ist das Bild.
Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man ein einfaches Karussell mit js implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!