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 面向对象编程  function是方法(函数)
Sep 17 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
AngularJS实现表单验证
Jan 28 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
layui分页效果实现代码
May 19 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
vue实现简单的日历效果
Sep 24 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php常用数学函数汇总
2014/11/21 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
使用python编写监听端
2018/04/12 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
利用python绘制正态分布曲线
2021/01/04 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
优秀教师工作感言
2014/02/16 职场文书
学校施工安全责任书
2015/01/29 职场文书
年会邀请函范文
2015/01/30 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript