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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
jQuery聚合函数实例
May 21 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
mysql建立外键
2006/11/25 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python实现读取json文件到excel表
2017/11/18 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
python PIL模块的基本使用
2020/09/29 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
几个Shell Script面试题
2014/04/18 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
家长会演讲稿范文
2014/01/10 职场文书
记帐员岗位责任制
2014/02/08 职场文书
《学棋》教后反思
2014/04/14 职场文书
出国留学担保书
2014/05/20 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
队名及霸气口号大全
2015/12/25 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android