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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
基于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
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript 获取图片颜色
2009/04/05 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
vue实现购物车加减
2020/05/30 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python 内置函数complex详解
2016/10/23 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
班主任经验交流会主持词
2014/04/01 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
谢师宴家长致辞
2015/07/27 职场文书
2015国庆节感想
2015/08/04 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers