Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie verwendet js die Timer-Methode setInterval, um ein Karusselldiagramm zu implementieren (vollständiger Code)?

不言
Freigeben: 2018-08-13 16:08:36
Original
8063 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung der setInterval-Timer-Methode (vollständiger Code). Ich hoffe, dass er für Sie hilfreich ist.

Als ich vorher zu einem Vorstellungsgespräch ging, bat mich der Interviewer, ein Karussell von Hand zu schreiben. Es war gerade erst herausgekommen, daher war js nicht sehr gut, also sagte ich nur, dass ich es nicht schreiben könne. Wenn ich ein hohes Gehalt möchte, brauche ich immer noch js. Wenn Ihnen langweilig ist, können Sie es jetzt mit der setInterval-Timer-Methode lernen.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        #main{width:490px;margin:100px auto;}
        #main img{width:100%;height:300px}
        #main li{list-style: none;float: left;width:47px;border:1px solid orange;text-align: center;
            padding:6px;
        }
        .orange{background-color: orange}
    </style>
</head>
<body>
<p id="main">
    <img src="img/1.jpg">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</p>
<script type="text/javascript">
    var op = document.getElementsByTagName("img")[0];
    var oLi = document.getElementsByTagName("li");
    var count =1;
    var timer = setInterval(function () {
        op.src = "img/"+count+".jpg";
        for ( var i=0;i<oLi.length;i++ ){
            oLi[i].className = &#39;&#39;;
        }
        oLi[count-1].className = "orange";
        count++;
        if (count>8){
            count=1;
        }
    },1000)
</script>
</body>
</html>
Nach dem Login kopieren

Beispielbild:

Verwandte Empfehlungen:

Welche Methoden gibt es, um Duplikate aus JS-Arrays zu entfernen? Zusammenfassung von fünf Methoden zum Deduplizieren von js-Arrays (mit Code)

Implementierung und Verwendung des ungeordneten Bildvorladens in jquery

Das obige ist der detaillierte Inhalt vonWie verwendet js die Timer-Methode setInterval, um ein Karusselldiagramm zu implementieren (vollständiger Code)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!