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
相关文章
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
以前对于JavaScript总是在用到的时候在页面上写几个函数，基本没考虑到函数的封装与重用，最近有个项目可能对于这方面要求有点高，所以就研究了下类似jQuery的封装2012-06-06
这篇文章主要为大家详细介绍了jQuery+PHP+Mysql实现抽奖程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
AJAX 是一种用于创建快速动态网页的技术。这篇文章主要介绍了基于jQuery的ajax方法封装的相关资料,需要的朋友可以参考下2016-07-07
视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις (parallaxis)，意思是改变2012-09-09
下面小编就为大家带来一篇jquery.serialize() 函数语法及简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了jQuery实现页面下拉100像素出现悬浮窗口的方法,涉及jQuery事件监听及针对页面元素的判定与动态操作技巧,需要的朋友可以参考下2016-09-09
jquery.pagination.js 无刷新分页实现步骤分享
jquery.pagination.js 无刷新分页实现步骤分享，需要的朋友可以参考下2012-05-05
下面小编就为大家带来一篇老生常谈jquery id选择器和class选择器的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了jQuery div拖拽用法,以完整实例形式分析了jQuery结合UI插件实现拖拽功能的相关技巧,需要的朋友可以参考下2016-01-01
有时候为了更好的用户体验，使用jquery的朋友可以参考下代码。2011-09-09
最新评论