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代码部分：
<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.jb51.net 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.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
为jquery的ajax请求添加超时timeout时间的操作方法
下面给大家介绍为jquery的ajax请求添加超时timeout时间的实例 有时侯要用ajax来轮询某个服务是否可用,但是各个浏览器ajax的超时时间有可能不一样,所以希望ajax能只尝试几秒钟,然后隔几秒再次发送一次ajax检查一次.可以用timeout属性. var checkLoading = function(timer) { //先延时再获取状态,否则立即获取可能重启前的服务还没有关闭 setTimeout(function() { $.ajax({ url: '/onceos/ver
-
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
前言 最近在项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非常的漂亮,h5发展了这么多年了,改变了互联网行业啊! 时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中.时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形,当事件发生的时候则在这些长条的上方进行标记. 下面给大家介绍几款漂亮的时间轴,也许大家以后工作中会用到. 一.纵
-
jquery中实现时间戳与日期相互转换
直接看代码: 提醒:不要忘记了引用jquery的类库 (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: function(){ return Date.parse(new Date())/1000; }, /** * 日期 转换为 Unix时间戳 * @param <string> 2014-01-01 20:20:20 日期格式 * @return <
-
基于jQuery的时间戳与日期间的转化
本文实例为大家分享了jQuery时间戳与日期间的转化代码,供大家参考,具体内容如下 背景: 需求如图: 直接上代码,所有的内容都在注释里: /** * 格式化时间:补0操作 * */ function supplement(num){ if(parseInt(num) < 10){ num = '0'+num; } return num; }; /** * 格式化时间:拓展jquery的全局变量 * */ $.extend({ JTime:{ //当前时间戳 秒:如果要毫秒就不除以1000 ne
-
jQuery时间戳和日期相互转换操作示例
本文实例讲述了jQuery时间戳和日期相互转换操作.分享给大家供大家参考,具体如下: 网上找的很多都没都是这样显示的2017-8-7 3:5:3 自己搜索改下了一下加了0这样显示 2017-08-07 15:05:03 (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: function(){ return Date.parse(new Date())/1000; }, /
-
jquery 时间戳转日期过程详解
这篇文章主要介绍了jquery 时间戳转日期过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 搜了一下发现这个时间戳转时间的代码很好用,附上实践的代码 结果如下 代码如下 /** * 时间戳转日期 * @param timestamp * @returns {*} */ function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位
-
jQuery实现每隔一段时间自动更换样式的方法分析
本文实例讲述了jQuery实现每隔一段时间自动更换样式的方法.分享给大家供大家参考,具体如下: js核心代码部分: $(document).ready(function(){ // 皮肤列表选项切换 $(".ulSkin li").click(function(){ $(this).addClass("active").siblings("li").removeClass("active"); }); }); // 皮肤背景切
-
jQuery经过一段时间自动隐藏指定元素的方法
本文实例讲述了jQuery经过一段时间自动隐藏指定元素的方法.分享给大家供大家参考.具体如下: 下面的代码提供了两种方法用于定时隐藏元素,第一种是使用setTimeout实现,第二种是使用jQuery1.4以后版本中提供的delay方法实现,第二种更简单一下. //这是1.3.2中我们使用setTimeout来实现的方式 //http://www.jb51.net setTimeout(function() { $('.showdiv').hide('blind', {}, 500) }, 50
-
jQuery实现文本显示一段时间后隐藏的方法分析
本文实例讲述了jQuery实现文本显示一段时间后隐藏的方法.分享给大家供大家参考,具体如下: 点击button时,提示信息显示,8秒后,信息隐藏. <input id="place_order" name="place_order" type="submit" /> <div class="after_submit_remind" style="display: none;"> 请耐
-
Python 实现某个功能每隔一段时间被执行一次的功能方法
本人在做项目的时候遇到一个问题: 某个函数需要在每个小时的 3 分钟时候被执行一次,我希望我 15:45 启动程序,过了18 分钟在 16:03 这个函数被执行一次,下一次过 60 分钟在 17:03 再次被执行,下一次 18:03,以此类推. 以下是我基于 Timer 做的再封装实现了此功能. # -*- coding: utf-8 -*- # ================================================== # 对 Timer 做以下再封装的目的是:当某个
-
jquery实现Li滚动时滚动条自动添加样式的方法
本文实例讲述了jquery实现Li滚动时滚动条自动添加样式的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现当拖动滚动条的时候,Li滚动列表中的内容会自动随滚动条变化而下移,并自动添加样式. 运行效果截图如下: 具体代码如下: <html lang="en"> <head> <meta charset="utf-8"> <title>scroll滚动,LI随滚动条自动变化</title> &
-
WinForm实现程序一段时间不运行自动关闭的方法
本文实例讲述了WinForm实现程序一段时间不运行自动关闭的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Net; using System.
-
python实现自动更换ip的方法
本文实例讲述了python实现自动更换ip的方法.分享给大家供大家参考.具体实现方法如下: #!/usr/bin/env python #-*- encoding:gb2312 -*- # Filename: IP.py import sitecustomize import _winreg import ConfigParser from ctypes import * print '正在进行网络适配器检测,请稍候-' print netCfgInstanceID = None hkey =
-
jQuery实现为LI列表前3行设置样式的方法【2种方法】
本文实例讲述了jQuery实现为LI列表前3行设置样式的方法.分享给大家供大家参考,具体如下: 在设计网页模板的时候,为了突出信息的重要性以及美观度,我们会设置一些样式使LI文章列表的前3行加上不同的样式,例如给LI文章列表的前3行文字颜色设置红色,再例如图片列表的时候设置列表第一张图片.第二张图片等的宽和高,都可以用蓝叶分享的这两种方法为LI列表设置样式:对于懂PHP语言的设计者来说,很容易就可以实现的效果,对于不懂PHP语言的可以使用这两种方法也很轻松的实现自己想要的各种效果. <!DOCT
-
jQuery select自动选中功能实现方法分析
本文实例分析了jQuery select自动选中功能实现方法.分享给大家供大家参考,具体如下: //筛选 var typeid = "<!--{$typeid}-->"; var bigclassid = "<!--{$bigclassid}-->"; var smallclassid = "<!--{$smallclassid}-->"; $("#typeid option[value="
-
PHP cookie，session的使用与用户自动登录功能实现方法分析
本文实例讲述了PHP cookie,session的使用与用户自动登录功能实现方法.分享给大家供大家参考,具体如下: cookie的使用 //生成cookie //注释:setcookie() 函数必须位于 <html> 标签之前. //setcookie(name, value, expire, path, domain); //名称,值,过期时间,有效路径,有效域名 //path,可选:如果路径设置为 "/",那么 cookie 将在整个域名内有效.如果路径设置为 &q