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 相关文章推荐
js 深拷贝函数
Dec 04 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
js取整数、取余数的方法
May 11 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
原生JS实现相邻月份日历
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 前一天或后一天的日期
2008/06/28 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
javascript JSON操作入门实例
2010/04/16 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
python调用java的Webservice示例
2014/03/10 Python
Python3基础之函数用法
2014/08/13 Python
Python图算法实例分析
2016/08/13 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python 美化输出信息的实例
2018/10/15 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
python实现图片转字符画
2021/02/19 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
大一军训感言
2014/01/09 职场文书
我的祖国演讲稿
2014/05/04 职场文书
活动倡议书范文
2014/05/13 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
三好学生竞选稿范文
2019/08/21 职场文书