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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
vue总线机制(bus)知识点详解
May 10 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
动态控制Table的js代码
2007/03/07 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
优化javascript的执行速度
2010/01/23 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python中单、双下划线的区别总结
2017/12/01 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
目标管理责任书
2014/04/15 职场文书
物流专业自荐信
2014/05/23 职场文书
绿色环保口号
2014/06/12 职场文书
大学生工作自荐书
2014/06/16 职场文书
个人工作保证书
2015/02/28 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
git中cherry-pick命令的使用教程
2022/06/25 Servers