jQuery 翻牌或百叶窗效果(内容三秒自动切换)


Posted in Javascript onJune 14, 2012

核心代码:

$(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.3water.com/js/2012/mybyc/
打包下载:https://3water.com/jiaoben/55611.html

Javascript 相关文章推荐
Javascript表单验证要注意的事项
Sep 29 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
浅谈Node.js 沙箱环境
May 15 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
VUE安装使用教程详解
Jun 03 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 #Javascript
基于jQuery的360图片展示实现代码
Jun 14 #Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 #Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 #Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 #Javascript
javascript倒计时功能实现代码
Jun 07 #Javascript
基于jQuery的计算文本框字数的代码
Jun 06 #Javascript
You might like
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP面向对象详解(三)
2015/12/07 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python字符串反转的四种方法详解
2019/12/02 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
美容师的职业规划书
2013/12/27 职场文书
读书活动实施方案
2014/03/10 职场文书
新闻人物通讯稿
2014/10/09 职场文书
2016大一新生军训感言
2015/12/08 职场文书