这次给大家带来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代码部分：
- 样式0
- 样式1
- 样式2
- 样式3
- 样式4
样式自动更换测试
登录后复制
完整示例代码如下：
www.jb51.net jQuery自动定时更换样式 .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;}
- 样式0
- 样式1
- 样式2
- 样式3
- 样式4
样式自动更换测试
$(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; }}登录后复制
使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Angular+RouterLink做出不同的花式跳转
怎样使用React为Vue引入容器组件+展示组件
以上就是jQuery实现固定时间自动更换样式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752026.html
