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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 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查询网站的PR值
2013/10/30 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php微信开发之关注事件
2018/06/14 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
javascript 常用方法总结
2009/06/03 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
angularjs基础教程
2014/12/25 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python实现apahce网站日志分析示例
2014/04/02 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python之文字转图片方法
2018/05/10 Python
python简单的三元一次方程求解实例
2020/04/02 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
求职自荐信格式
2013/12/04 职场文书
节约电力资源的建议书
2014/03/12 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
趣味运动会赞词
2015/07/22 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
使用nginx配置访问wgcloud的方法
2021/06/26 Servers