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 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
vue实现固定位置显示功能
May 30 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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 和 MySQL 基础教程(三)
2006/10/09 PHP
聊天室php&mysql(六)
2006/10/09 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
python如何爬取网页中的文字
2020/07/28 Python
通俗讲解python 装饰器
2020/09/07 Python
HTML5标签大全
2016/11/23 HTML / CSS
简述数组与指针的区别
2014/01/02 面试题
成立公司计划书
2014/05/07 职场文书
会计工作岗位职责
2015/02/03 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS