Heim > Web-Frontend > js-Tutorial > jQuery implementiert den automatischen Stilwechsel zu einem festgelegten Zeitpunkt

jQuery implementiert den automatischen Stilwechsel zu einem festgelegten Zeitpunkt

php中世界最好的语言
Freigeben: 2018-06-01 11:43:18
Original
1572 Leute haben es durchsucht

Dieses Mal werde ich Ihnen zeigen, wie jQuery den Stil zu einem festen Zeitpunkt automatisch ändert. Das Folgende ist ein praktischer Fall sehen. JS-Kerncodeteil:

$(document).ready(function(){
 // 皮肤列表选项切换
 $(".ulSkin li").click(function(){
 $(this).addClass("active").siblings("li").removeClass("active");
 });
});
// 皮肤背景切换
function skin1(){
 $("#skins").removeClass("skin0 skin2 skin3 skin4").addClass("skin1");
}
function skin2(){
 $("#skins").removeClass("skin0 skin1 skin3 skin4").addClass("skin2");
}
function skin3(){
 $("#skins").removeClass("skin0 skin1 skin2 skin4").addClass("skin3");
}
function skin4(){
 $("#skins").removeClass("skin0 skin1 skin2 skin3").addClass("skin4");
}
function skin0(){
 $("#skins").removeClass("skin4 skin1 skin2 skin3").addClass("skin0");
}
// 设定循环切换相隔时间
$(window).load(function() {
 setInterval("autochange()",3000);
})
// 设置一个判断计数器
var count=0;
// 根据计数器状态切换响应的皮肤
function autochange() {
 if (count==0) {
 skin1();
 }
 if (count==1) {
 skin2();
 }
 if (count==2) {
 skin3();
 }
 if (count==3) {
 skin4();
 }
 if (count==4) {
 skin0();
 }
 count=count+1;
 if (count>4) {
 count=0;
 }
}
Nach dem Login kopieren

CSS-Stilteil:

.ulSkin{height:150px; width:auto;}
.ulSkin li{float:left; width:80px; list-style: none;}
.active{font-weight:700; font-size:18px;}
.skin0{color:#000;}
.skin1{color:#00f;}
.skin2{color:#0f0;}
.skin3{color:#f00;}
.skin4{color:#ff0;}
Nach dem Login kopieren

HTML-Codeteil:

<p>
<ul class="ulSkin">
 <li class="active skin0">样式0</li>
 <li class="skin1">样式1</li>
 <li class="skin2">样式2</li>
 <li class="skin3">样式3</li>
 <li class="skin4">样式4</li>
</ul>
<p id="skins" class="skin0">样式自动更换测试</p>
</p>
Nach dem Login kopieren

Der vollständige Beispielcode lautet wie folgt:





www.jb51.net jQuery自动定时更换样式


<p> <ul class="ulSkin">  <li class="active skin0">样式0</li>  <li class="skin1">样式1</li>  <li class="skin2">样式2</li>  <li class="skin3">样式3</li>  <li class="skin4">样式4</li> </ul> <p id="skins" class="skin0">样式自动更换测试</p> </p> <script> $(document).ready(function(){  // 皮肤列表选项切换  $(&quot;.ulSkin li&quot;).click(function(){  $(this).addClass(&quot;active&quot;).siblings(&quot;li&quot;).removeClass(&quot;active&quot;);  }); }); // 皮肤背景切换 function skin1(){  $(&quot;#skins&quot;).removeClass(&quot;skin0 skin2 skin3 skin4&quot;).addClass(&quot;skin1&quot;); } function skin2(){  $(&quot;#skins&quot;).removeClass(&quot;skin0 skin1 skin3 skin4&quot;).addClass(&quot;skin2&quot;); } function skin3(){  $(&quot;#skins&quot;).removeClass(&quot;skin0 skin1 skin2 skin4&quot;).addClass(&quot;skin3&quot;); } function skin4(){  $(&quot;#skins&quot;).removeClass(&quot;skin0 skin1 skin2 skin3&quot;).addClass(&quot;skin4&quot;); } function skin0(){  $(&quot;#skins&quot;).removeClass(&quot;skin4 skin1 skin2 skin3&quot;).addClass(&quot;skin0&quot;); } // 设定循环切换相隔时间 $(window).load(function() {  setInterval(&quot;autochange()&quot;,3000); }) // 设置一个判断计数器 var count=0; // 根据计数器状态切换响应的皮肤 function autochange() {  if (count==0) {  skin1();  }  if (count==1) {  skin2();  }  if (count==2) {  skin3();  }  if (count==3) {  skin4();  }  if (count==4) {  skin0();  }  count=count+1;  if (count&gt;4) {  count=0;  } } </script>
Nach dem Login kopieren

Verwenden Sie diese Website

HTML/CSS/JS Online-Lauftesttool:http://tools.jb51.net/code/HtmlJsRun, Sie können den folgenden Test erhalten Laufeffekt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Angular+RouterLink macht verschiedene ausgefallene Sprünge

Wie man React verwendet, um Containerkomponenten in die Vue+ Display-Komponente einzuführen

Das obige ist der detaillierte Inhalt vonjQuery implementiert den automatischen Stilwechsel zu einem festgelegten Zeitpunkt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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