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触发select onchange事件的小技巧
Aug 05 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
JS document内容及样式操作完整示例
Jan 14 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
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
JS实现文字掉落效果的方法
2015/05/06 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
python实现连接mongodb的方法
2015/05/08 Python
pandas中去除指定字符的实例
2018/05/18 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
工程业务员工作职责
2013/12/07 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
精神文明单位申报材料
2014/05/02 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
小学假期安全广播稿
2014/09/28 职场文书
销售经理工作检讨书
2015/02/19 职场文书
获奖感言一句话
2015/07/31 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis