jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動切換)
更新時間：2012年06月14日 13:59:22 作者：
jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動切換)，讓列表內(nèi)容不再枯燥
核心代碼：
$(function(){
var timer = true; //執(zhí)行向上或向下的開關(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，讓下一個LI移動top值;
function ainbyc(ds){
var set2 = setInterval(function(){
//所有的LI移動完畢，就清除
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.清除定時器clearInterval，先前我寫在了外面，應(yīng)該是寫在setInterval里面。
2.當(dāng)不確定布爾是什么值的時候，可以這樣寫：timer = !timer;
在線演示：http://demo.jb51.net/js/2012/mybyc/
打包下載：http://www.dbjr.com.cn/jiaoben/55611.html
復(fù)制代碼 代碼如下:
$(function(){
var timer = true; //執(zhí)行向上或向下的開關(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，讓下一個LI移動top值;
function ainbyc(ds){
var set2 = setInterval(function(){
//所有的LI移動完畢，就清除
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.清除定時器clearInterval，先前我寫在了外面，應(yīng)該是寫在setInterval里面。
2.當(dāng)不確定布爾是什么值的時候，可以這樣寫：timer = !timer;
在線演示：http://demo.jb51.net/js/2012/mybyc/
打包下載：http://www.dbjr.com.cn/jiaoben/55611.html
相關(guān)文章
本文給大家分享兩段實例代碼給大家講解jquery獲取選中單選按鈕radio的值，非常不錯，具有參考借鑒價值，一起看看吧2016-12-12
jQuery中extend()和fn.extend()方法詳解
jQuery自定義了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能夠創(chuàng)建全局函數(shù)或者選擇器,而jQuery.fn.extend()方法能夠創(chuàng)建jQuery對象方法.2015-06-06
jquery 取子節(jié)點及當(dāng)前節(jié)點屬性值的方法
這篇文章主要介紹了jquery 取子節(jié)點及當(dāng)前節(jié)點屬性值的方法,比較適合新手，也比較實用，需要的朋友可以參考下2014-08-08
json+jQuery實現(xiàn)的無限級樹形菜單效果代碼
這篇文章主要介紹了json+jQuery實現(xiàn)的無限級樹形菜單效果代碼,涉及jquery針對json數(shù)據(jù)的遍歷、讀取及動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文以示例的方式為大家介紹下jquery sortable的拖動方法的具體實現(xiàn)，感興趣的朋友可以參考下2014-01-01
基于jQuery實現(xiàn)的當(dāng)離開頁面時出現(xiàn)提示的實現(xiàn)代碼
基于jQuery實現(xiàn)的當(dāng)離開頁面時出現(xiàn)提示的實現(xiàn)代碼，需要的朋友可以參考下。2011-06-06
這篇文章主要介紹了jQuery樣式操作方法，并通過實際案例更淺顯的理解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
本篇文章給大家分享了20個最常見的jQuery面試問題及答案，對此有需要的朋友可以參考下。2018-05-05
jquery自動填充勾選框，即把勾選框打上（true），然后通過ajax方式獲得勾選項列表，再把列表內(nèi)的選項打上2014-03-03
利用jQuery的動畫函數(shù)animate實現(xiàn)豌豆發(fā)射效果
本文主要講解jQuery的animate函數(shù)的基本用法，利用動畫函數(shù)animate實現(xiàn)豌豆發(fā)射的效果，對于學(xué)習(xí)animate很有幫助，有需要的可以參考借鑒。2016-08-08