jQuery implémente le changement automatique de styles à une heure fixe-js tutoriel-php.cn

jQuery implémente le changement automatique de styles à une heure fixe

php中世界最好的语言

Libérer： 2018-06-01 11:43:18

original

1572 Les gens l'ont consulté

Cette fois, je vais vous proposer jQuery pour changer automatiquement le style à une heure fixe. Quelles sont les précautions pour que jQuery change automatiquement le style à une heure fixe. Ce qui suit est un cas pratique, voyons. jetez un oeil.

Partie du code de base js :

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

Copier après la connexion

Partie de style CSS :

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

Copier après la connexion

Partie du code HTML :

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

Copier après la connexion

L'exemple de code complet est la suivante :





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>

Copier après la connexion

Utilisez ce siteOutil de test d'exécution en ligne HTML/CSS/JS : http://tools.jb51.net/code/ HtmlJsRun, disponible Les résultats d'opération de test suivants sont obtenus :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Angular+RouterLink fait différents sauts fantaisistes

Comment utiliser React pour introduire des composants de conteneur dans le composant Vue+ Display

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!