jQuery implements automatic change of styles at a fixed time-JS Tutorial-php.cn

jQuery implements automatic change of styles at a fixed time

php中世界最好的语言

Release： 2018-06-01 11:43:18

Original

1570 people have browsed it

This time I will bring you jQuery to automatically change styles at a fixed time. What are the precautions for jQuery to automatically change styles at a fixed time? The following is a practical case, let's take a look.

js core code part:

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

Copy after login

css style part:

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

Copy after login

HTML code part:

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

Copy after login

The complete sample code is as follows:





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>

Copy after login

Use this site

HTML/CSS/JS online running test tool:http://tools.jb51.net/code/HtmlJsRun, you can get the following test running effect:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!