jQuery做出循环时间自动更换样式功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery做出循环时间自动更换样式功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3498字，纯文字阅读大概需要5分钟。
内容图文
这次给大家带来jQuery做出循环时间自动更换样式功能，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");
}
// 设定循环切换相隔时间
$(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;
}
}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代码部分：
<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>
完整示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.gxlcms.com 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>
<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(){
// 皮肤列表选项切换
$(".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;
}
}
</script>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
react router4+redux控制路由权限步骤详解
Webpack path与publicPath使用优劣势详解
以上就是jQuery做出循环时间自动更换样式功能的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的jQuery做出循环时间自动更换样式功能全部内容，希望文章能够帮你解决jQuery做出循环时间自动更换样式功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】