jQuery führt während der Zykluszeit eine automatische Stiländerungsfunktion durch

Dieses Mal werde ich Ihnen die Funktion von jQuery zum automatischen Ändern des Stils in der Zykluszeit vorstellen. Was sind die Vorsichtsmaßnahmen für jQuery, um den Stil in der Zykluszeit automatisch zu ändern? Schauen Sie mal rein.

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;
 }
}

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;}

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>

Der vollständige Beispielcode lautet wie folgt:

<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>

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:

Detaillierte Erläuterung der Schritte zur Steuerung von Routing-Berechtigungen mit React Router4+Redux

Detaillierte Erläuterung von die Vor- und Nachteile der Verwendung von Webpack Path und publicPath

Das obige ist der detaillierte Inhalt vonjQuery führt während der Zykluszeit eine automatische Stiländerungsfunktion durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!