jQuery實現每隔一段時間自動更換樣式的方法分析

更新時間：2018年05月03日 08:48:20 作者：夏日米米茶

這篇文章主要介紹了jQuery實現每隔一段時間自動更換樣式的方法,結合實例形式較為詳細的分析了jQuery結合時間函數動態(tài)修改頁面元素屬性相關操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現每隔一段時間自動更換樣式的方法。分享給大家供大家參考，具體如下：

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");
}
// 設定循環(huán)切換相隔時間
$(window).load(function() {
 setInterval("autochange()",3000);
})
// 設置一個判斷計數器
var count=0;
// 根據計數器狀態(tài)切換響應的皮膚
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樣式部分：

.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代碼部分：

<div>
<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>
<div id="skins" class="skin0">樣式自動更換測試</div>
</div>

完整示例代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.dbjr.com.cn jQuery自動定時更換樣式</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
.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;}
</style>
<body>
<div>
<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>
<div id="skins" class="skin0">樣式自動更換測試</div>
</div>
<script>
$(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");
}
// 設定循環(huán)切換相隔時間
$(window).load(function() {
 setInterval("autochange()",3000);
})
// 設置一個判斷計數器
var count=0;
// 根據計數器狀態(tài)切換響應的皮膚
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;
 }
}
</script>
</body>
</html>

使用本站HTML/CSS/JS在線運行測試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測試運行效果：