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 相关文章推荐
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
react-router中的属性详解
Jun 01 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
vue.js购物车添加商品组件的方法
Sep 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连接Access数据库错误及解决方法
2013/06/20 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
js如何获取网页所有图片
2017/05/12 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
教师求职推荐信范文
2013/11/20 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
开学典礼演讲稿
2014/05/23 职场文书
团队口号大全
2014/06/06 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
导游词怎么写
2015/02/04 职场文书
Java Redisson多策略注解限流
2022/09/23 Java/Android