jQuery實(shí)現(xiàn)每隔一段時(shí)間自動更換樣式的方法分析
本文實(shí)例講述了jQuery實(shí)現(xiàn)每隔一段時(shí)間自動更換樣式的方法。分享給大家供大家參考,具體如下:
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">樣式自動更換測試</div> </div>
完整示例代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.dbjr.com.cn jQuery自動定時(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">樣式自動更換測試</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)行測試工具:http://tools.jb51.net/code/HtmlJsRun,可得到如下測試運(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é)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)checkbox的簡單操作
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox的簡單操作,對復(fù)選框組的全選、全不選、不全選,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11jQuery Selectors(選擇器)的使用(一、基本篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡單,全面為基礎(chǔ),不會涉及很深。2009-12-12jQuery實(shí)現(xiàn)Twitter的自動文字補(bǔ)齊特效
本文介紹了一款jQuery實(shí)現(xiàn)的文字自動補(bǔ)全特效的插件,該插件可以結(jié)合本地?cái)?shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來越火了,作為一個(gè)WEB程序開發(fā)者要是不會這個(gè)感覺就要落伍,甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者,當(dāng)然我也要“隨波逐流”一把,不然飯碗不保啊!2009-11-11jquery img src 獲取實(shí)現(xiàn)代碼
利用jquery 取得IMG src的問題,有需要的朋友可以參考下。2009-05-05jQuery之DOM對象和jQuery對象的轉(zhuǎn)換與區(qū)別分析
這篇文章主要介紹了jQuery之DOM對象和jQuery對象的轉(zhuǎn)換與區(qū)別分析,對比分析了DOM對象和jQuery對象的原理與用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
對于一個(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