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 相关文章推荐
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
javaScript把其它类型转换为Number类型
Oct 13 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中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
js jquery数组介绍
2012/07/15 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python随机数函数代码实例解析
2020/02/09 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
办公室主任职责范文
2013/11/08 职场文书
军训心得体会
2013/12/31 职场文书
药品促销活动方案
2014/02/14 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
成绩单评语
2015/01/04 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript