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 相关文章推荐
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php分页示例分享
2014/04/30 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
夜班门卫岗位职责
2013/12/09 职场文书
数学教学随笔感言
2014/02/17 职场文书
超市商业计划书
2014/05/04 职场文书
假面舞会策划方案
2014/05/29 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
信访稳定工作汇报
2014/10/27 职场文书
家长高考寄语
2015/02/27 职场文书
小学班主任个人总结
2015/03/03 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android