jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動(dòng)切換)
$(function(){
var timer = true; //執(zhí)行向上或向下的開(kāi)關(guān)
var liindex = 0; //LI的索引
var $div = $(".byc").find("div");
//每隔三秒執(zhí)行一次變換LI的內(nèi)容
var set1 = setInterval(function(){
ainbyc($div);
liindex = 0;
timer = !timer;
},3000);
//LI變換的方式,即每隔100ms,讓下一個(gè)LI移動(dòng)top值;
function ainbyc(ds){
var set2 = setInterval(function(){
//所有的LI移動(dòng)完畢,就清除
if(liindex == $div.length){
clearInterval(set2);
//向上
}else if(timer){
ds.eq(liindex).animate({"top":0},100);
//向下
}else{
ds.eq(liindex).animate({"top":-25},100);
}
liindex++;
},100);
}
})
妙味視頻里面都分析的很清楚了。這里只總結(jié)一下。
1.清除定時(shí)器clearInterval,先前我寫在了外面,應(yīng)該是寫在setInterval里面。
2.當(dāng)不確定布爾是什么值的時(shí)候,可以這樣寫:timer = !timer;
在線演示:http://demo.jb51.net/js/2012/mybyc/
打包下載:http://www.dbjr.com.cn/jiaoben/55611.html
相關(guān)文章
jQuery中extend()和fn.extend()方法詳解
jQuery自定義了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能夠創(chuàng)建全局函數(shù)或者選擇器,而jQuery.fn.extend()方法能夠創(chuàng)建jQuery對(duì)象方法.2015-06-06jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法
這篇文章主要介紹了jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法,比較適合新手,也比較實(shí)用,需要的朋友可以參考下2014-08-08json+jQuery實(shí)現(xiàn)的無(wú)限級(jí)樹(shù)形菜單效果代碼
這篇文章主要介紹了json+jQuery實(shí)現(xiàn)的無(wú)限級(jí)樹(shù)形菜單效果代碼,涉及jquery針對(duì)json數(shù)據(jù)的遍歷、讀取及動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery sortable的拖動(dòng)方法示例詳解
本文以示例的方式為大家介紹下jquery sortable的拖動(dòng)方法的具體實(shí)現(xiàn),感興趣的朋友可以參考下2014-01-01基于jQuery實(shí)現(xiàn)的當(dāng)離開(kāi)頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的當(dāng)離開(kāi)頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-06-0620個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案
本篇文章給大家分享了20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案,對(duì)此有需要的朋友可以參考下。2018-05-05jquery自動(dòng)填充勾選框即把勾選框打上true
jquery自動(dòng)填充勾選框,即把勾選框打上(true),然后通過(guò)ajax方式獲得勾選項(xiàng)列表,再把列表內(nèi)的選項(xiàng)打上2014-03-03利用jQuery的動(dòng)畫函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射效果
本文主要講解jQuery的animate函數(shù)的基本用法,利用動(dòng)畫函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射的效果,對(duì)于學(xué)習(xí)animate很有幫助,有需要的可以參考借鑒。2016-08-08