suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert die Klickzyklusumschaltung, um Inhalte anzuzeigen

JS implementiert die Klickzyklusumschaltung, um Inhalte anzuzeigen

小云云
小云云Original
2018-01-09 11:20:182287Durchsuche

In diesem Artikel wird hauptsächlich die JS-Methode zum Realisieren der Klickzyklusumschaltung zum Anzeigen von Inhalten vorgestellt, einschließlich der Reaktion auf JavaScript-Mausereignissen, der Erfassung von Seitenelementen, Attributeinstellungen und anderen verwandten Betriebstechniken. Ich hoffe, dass dies der Fall ist allen helfen.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>www.jb51.net 点击循环切换内容</title> 
  <style> 
    a { 
      cursor: pointer; 
      color: red; 
    } 
    p { 
      display: none; 
    } 
  </style> 
</head> 
<body> 
  <a onclick="con()">循环切换内容</a> 
  <p>11111</p> 
  <p>22222</p> 
  <p>33333</p> 
  <script> 
    //可以换成切换图片等等 
    flag = 0; 
    pre = 0; 
    function con(){ 
      var cons = document.getElementsByTagName("p"); 
      document.getElementsByTagName("p")[pre].style.display = "none"; 
      document.getElementsByTagName("p")[flag].style.display = "inline"; 
      console.log(flag); 
      pre = flag; 
      if(flag == cons.length - 1) { //注意是cons.length-1，因为索引值是从0开始的 
        flag = 0; 
      } else { 
        ++flag; 
      } 
    } 
  </script> 
</body> 
</html>

Verwandte Empfehlungen:

JavaScript-Tutorial – Klicken Sie, um in einer Schleife Bilder zu wechseln

Umfassende Beispiele für das Umschalten von Javascript-Bildern (Schleifenumschaltung, sequentielles Umschalten)_Javascript-Kenntnisse

Detaillierte Erklärung der Ereignisschleife in JS und Node.js

Das obige ist der detaillierte Inhalt vonJS implementiert die Klickzyklusumschaltung, um Inhalte anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js 循环 JS 事件 鼠标事件
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：So lösen Sie das Problem, dass die BootStrap-Modalbox nicht vertikal zentriert istNächster Artikel：So lösen Sie das Problem, dass die BootStrap-Modalbox nicht vertikal zentriert ist

In Verbindung stehende Artikel

Mehr sehen