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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
React diff算法的实现示例
Apr 20 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
vue中配置scss全局变量的步骤
Dec 28 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
PHP实现远程下载文件到本地
2015/05/17 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
mongodb和php的用法详解
2019/03/25 PHP
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python读取oracle函数返回值
2016/07/18 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python实现彩票系统
2020/06/28 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
关于十八大的演讲稿
2014/09/15 职场文书