jQuery 翻牌或百叶窗效果(内容三秒自动切换)
更新时间：2012年06月14日 13:59:22 作者：
jQuery 翻牌或百叶窗效果(内容三秒自动切换)，让列表内容不再枯燥
核心代码：
$(function(){
var timer = true; //执行向上或向下的开关
var liindex = 0; //LI的索引
var $div = $(".byc").find("div");
//每隔三秒执行一次变换LI的内容
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);
}
})
妙味视频里面都分析的很清楚了。这里只总结一下。
1.清除定时器clearInterval，先前我写在了外面，应该是写在setInterval里面。
2.当不确定布尔是什么值的时候，可以这样写：timer = !timer;
在线演示：http://demo.jb51.net/js/2012/mybyc/
打包下载：https://www.jb51.net/jiaoben/55611.html
复制代码 代码如下:
$(function(){
var timer = true; //执行向上或向下的开关
var liindex = 0; //LI的索引
var $div = $(".byc").find("div");
//每隔三秒执行一次变换LI的内容
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);
}
})
妙味视频里面都分析的很清楚了。这里只总结一下。
1.清除定时器clearInterval，先前我写在了外面，应该是写在setInterval里面。
2.当不确定布尔是什么值的时候，可以这样写：timer = !timer;
在线演示：http://demo.jb51.net/js/2012/mybyc/
打包下载：https://www.jb51.net/jiaoben/55611.html
相关文章
本文给大家分享两段实例代码给大家讲解jquery获取选中单选按钮radio的值，非常不错，具有参考借鉴价值，一起看看吧2016-12-12
jQuery中extend()和fn.extend()方法详解
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法.2015-06-06
这篇文章主要介绍了jquery 取子节点及当前节点属性值的方法,比较适合新手，也比较实用，需要的朋友可以参考下2014-08-08
这篇文章主要介绍了json+jQuery实现的无限级树形菜单效果代码,涉及jquery针对json数据的遍历、读取及动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本文以示例的方式为大家介绍下jquery sortable的拖动方法的具体实现，感兴趣的朋友可以参考下2014-01-01
基于jQuery实现的当离开页面时出现提示的实现代码，需要的朋友可以参考下。2011-06-06
这篇文章主要介绍了jQuery样式操作方法，并通过实际案例更浅显的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
本篇文章给大家分享了20个最常见的jQuery面试问题及答案，对此有需要的朋友可以参考下。2018-05-05
jquery自动填充勾选框，即把勾选框打上（true），然后通过ajax方式获得勾选项列表，再把列表内的选项打上2014-03-03
本文主要讲解jQuery的animate函数的基本用法，利用动画函数animate实现豌豆发射的效果，对于学习animate很有帮助，有需要的可以参考借鉴。2016-08-08
最新评论