jQuery實(shí)現(xiàn)每隔一段時(shí)間自動(dòng)更換樣式的方法分析
本文實(shí)例講述了jQuery實(shí)現(xiàn)每隔一段時(shí)間自動(dòng)更換樣式的方法。分享給大家供大家參考,具體如下:
js核心代碼部分:
$(document).ready(function(){ // 皮膚列表選項(xiàng)切換 $(".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"); } // 設(shè)定循環(huán)切換相隔時(shí)間 $(window).load(function() { setInterval("autochange()",3000); }) // 設(shè)置一個(gè)判斷計(jì)數(shù)器 var count=0; // 根據(jù)計(jì)數(shù)器狀態(tài)切換響應(yīng)的皮膚 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">樣式自動(dòng)更換測(cè)試</div> </div>
完整示例代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.dbjr.com.cn jQuery自動(dòng)定時(shí)更換樣式</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">樣式自動(dòng)更換測(cè)試</div> </div> <script> $(document).ready(function(){ // 皮膚列表選項(xiàng)切換 $(".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"); } // 設(shè)定循環(huán)切換相隔時(shí)間 $(window).load(function() { setInterval("autochange()",3000); }) // 設(shè)置一個(gè)判斷計(jì)數(shù)器 var count=0; // 根據(jù)計(jì)數(shù)器狀態(tài)切換響應(yīng)的皮膚 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在線運(yùn)行測(cè)試工具:http://tools.jb51.net/code/HtmlJsRun,可得到如下測(cè)試運(yùn)行效果:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)checkbox的簡(jiǎn)單操作
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox的簡(jiǎn)單操作,對(duì)復(fù)選框組的全選、全不選、不全選,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11jQuery Selectors(選擇器)的使用(一、基本篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深。2009-12-12jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效
本文介紹了一款jQuery實(shí)現(xiàn)的文字自動(dòng)補(bǔ)全特效的插件,該插件可以結(jié)合本地?cái)?shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲(chǔ)的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11JQuery標(biāo)簽頁(yè)效果實(shí)例詳解
這篇文章主要介紹了JQuery標(biāo)簽頁(yè)效果,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及切換標(biāo)簽頁(yè)的技巧,需要的朋友可以參考下2015-12-12jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來(lái)越火了,作為一個(gè)WEB程序開發(fā)者要是不會(huì)這個(gè)感覺就要落伍,甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者,當(dāng)然我也要“隨波逐流”一把,不然飯碗不保?。?2009-11-11jquery img src 獲取實(shí)現(xiàn)代碼
利用jquery 取得IMG src的問題,有需要的朋友可以參考下。2009-05-05jQuery之DOM對(duì)象和jQuery對(duì)象的轉(zhuǎn)換與區(qū)別分析
這篇文章主要介紹了jQuery之DOM對(duì)象和jQuery對(duì)象的轉(zhuǎn)換與區(qū)別分析,對(duì)比分析了DOM對(duì)象和jQuery對(duì)象的原理與用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
對(duì)于一個(gè)表格,為了更好的用戶體驗(yàn)度,需要把選中的表格項(xiàng)添加高亮,下面小編給大家介紹使用jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能的實(shí)例代碼,需要的朋友參考下2016-05-05jQuery應(yīng)用之jQuery鏈用法實(shí)例
這篇文章主要介紹了jQuery應(yīng)用之jQuery鏈用法,實(shí)例形式分析了jQuery鏈的原理及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01