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 相关文章推荐
javascript中函数作为参数调用的方法
Feb 09 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
JS中的继承操作实例总结
Jun 06 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原创论坛
2006/10/09 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
Python开发编码规范
2006/09/08 Python
Python迭代和迭代器详解
2016/11/10 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
高中军训感言500字
2014/02/24 职场文书
会议主持词
2014/03/17 职场文书
鸿星尔克广告词
2014/03/21 职场文书
教师岗位职责
2015/02/03 职场文书
大学生自荐书范文
2015/03/05 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
职工食堂管理制度
2015/08/06 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server