jQuery crée une fonction de changement de style automatique pendant le temps de cycle-js tutoriel-php.cn

jQuery crée une fonction de changement de style automatique pendant le temps de cycle

php中世界最好的语言

Libérer： 2018-05-14 13:54:50

original

2121 Les gens l'ont consulté

Cette fois, je vais vous apporter la fonction de jQuery pour changer automatiquement le style en temps de cycle. Quelles sont les précautions pour que jQuery change automatiquement le style en temps de cycle. 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

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 aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour contrôler les autorisations de routage avec React Router4+redux

Explication détaillée de les avantages et les inconvénients de l'utilisation de Webpack path et publicPath

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!