jQuery实现每隔一段时间自动更换样式的方法分析


Posted in jQuery onMay 03, 2018

本文实例讲述了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代码部分:

<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>3water.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>
<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");
}
// 设定循环切换相隔时间
$(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>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

jQuery实现每隔一段时间自动更换样式的方法分析

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
基于jquery实现五星好评
Nov 18 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
基于jquery实现左右上下移动效果
May 02 #jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
Python使用Django实现博客系统完整版
2020/09/29 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python中adb有什么功能
2020/06/07 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
教师节促销活动方案
2014/02/14 职场文书
教研处工作方案
2014/05/26 职场文书
责任书范本
2014/08/25 职场文书
股权转让协议范本
2014/12/07 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
红高粱观后感
2015/06/10 职场文书
用python画城市轮播地图
2021/05/28 Python
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL