Home > Web Front-end > JS Tutorial > body text

jQuery makes automatic style change function during cycle time

php中世界最好的语言
Release: 2018-05-14 13:54:50
Original
2139 people have browsed it

This time I will bring you the function of jQuery to automatically change the style during the cycle time. What are the precautions for jQuery to automatically change the style during the cycle 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
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!

Recommended reading:

react router4 redux detailed explanation of the steps to control routing permissions

Detailed explanation of the advantages and disadvantages of using Webpack path and publicPath

The above is the detailed content of jQuery makes automatic style change function during cycle time. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template