本文实例讲述了框架实现每隔一段时间自动更换样式的方法。分享给大家供大家参考，具体如下：

射流研究…核心代码部分：

$(文档)。就绪（函数(){ //皮肤列表选项切换$('.乌尔斯金李' .单击(function(){ $(this)).addClass('active ').兄弟姐妹('里').移除CLaSS(' active ')；});});//皮肤背景切换函数skin 1(){ $(' # skin ').移除CLaSS(皮肤0皮肤2皮肤3皮肤4).添加CLaSS(“皮肤1”)；}函数皮肤2(){ $(' #皮肤').移除CLaSS(皮肤0皮肤1皮肤3皮肤4).添加CLaSS(“皮肤2”)；}函数皮肤3(){ $(' #皮肤').移除CLaSS(皮肤0皮肤1皮肤2皮肤4).添加CLaSS(“皮肤3”)；}函数皮肤4(){ $(' #皮肤').移除CLaSS(皮肤0皮肤1皮肤2皮肤3).添加CLaSS(“皮肤4”)；}函数皮肤0(){ $(' #皮肤').移除CLaSS(皮肤4皮肤1皮肤2皮肤3).添加CLaSS(“皮肤0”)；}//设定循环切换相隔时间$(窗口)。load(function(){ setInterval(' autochange()'，3000)；})//设置一个判断计数器定义变量计数=0;//根据计数器状态切换响应的皮肤函数autochange(){ if(count==0){ skin 1()；} if(count==1){ skin 2()；} if(count==2){ skin 3()；} if(count==3){ skin 4()；} if(count==4){ skin 0()；}计数=计数1;if(count 4){ count=0；}}css样式部分：ulSkin { height:150px宽度：汽车；}.ulSkin li { float:left宽度：80 px列表样式：无；}.活动{ font-weight :700；font-size :18 px} . skin 0 { color : # 000 } . skin 1 { color : # 00f }。皮肤2 { color : # 0f 0；} . skin 3 { color : # f00 } . skin 4 { color : # ff0 } HTML代码部分：

div ul class=' ulSkin ' Li class='活动皮肤0 '样式0/li li class='skin1 '样式1/li li class='skin2 '样式2/li li class='skin3 '样式3/li li class='skin4 '样式4/Li/uldiv id=' skins ' class=' skin 0 '样式自动更换测试/div/div完整示例代码如下：

！DOCTYPE html html hearteta charset=' utf-8 '标题www。JB 51。net jQuery自动定时更换样式/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本/头部样式。ulskin { height :150 px宽度：汽车；}.ulSkin li { float:left宽度：80 px列表样式：无；}.活动{ font-weight :700；font-size :18 px} . skin 0 { color : # 000 } . skin 1 { color : # 00f }。皮肤2 { color : # 0f 0；} . skin 3 { color : # f00 } . skin 4 { color : # ff0 }/style body divul class=' ULSkin ' Li class=' active skin 0 '样式0/li li class='skin1 '样式1/li li class='skin2 '样式2/li li class='skin3 '样式3/li li class='skin4 '样式4/Li/uldiv id=' skins ' class=' skin 0 '样式自动更换测试/div/divscript$(文档)。就绪（函数(){ //皮肤列表选项切换$('.乌尔斯金李' .单击(function(){ $(this)).addClass('active ').兄弟姐妹('里').移除CLaSS(' active ')；});});//皮肤背景切换函数skin 1(){ $(' # skin ').移除CLaSS(皮肤0皮肤2皮肤3皮肤4).添加CLaSS(“皮肤1”)；}函数皮肤2(){ $(' #皮肤').移除CLaSS(皮肤0皮肤1皮肤3皮肤4).添加CLaSS(“皮肤2”)；}函数皮肤3(){ $(' #皮肤').移除CLaSS(皮肤0皮肤1皮肤2皮肤4).添加CLaSS(“皮肤3”)；}函数皮肤4(){ $(' #皮肤').移除CLaSS(皮肤0皮肤1皮肤2皮肤3).添加CLaSS(“皮肤4”)；}函数皮肤0(){ $(' #皮肤').移除CLaSS(皮肤4皮肤1皮肤2皮肤3).添加CLaSS(“皮肤0”)；}//设定循环切换相隔时间$(窗口)。load(function(){ setInterval(' autochange()'，3000)；})//设置一个判断计数器定义变量计数=0;//根据计数器状态切换响应的皮肤函数autochange(){ if(count==0){ skin 1()；} if(count==1){ skin 2()；} if(count==2){ skin 3()；} if(count==3){ skin 4()；} if(count==4){ skin 0()；}计数=计数1;if(count 4){ count=0；} }/脚本/正文/html使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

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