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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现上传图片功能
Jun 29 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
python map比for循环快在哪
2020/09/21 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
法律专业推荐信范文
2013/11/29 职场文书
实习评语
2013/12/16 职场文书
企业年会主持词
2014/03/27 职场文书
公民代理授权委托书
2014/09/24 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书