jQuery 翻牌或百叶窗效果(内容三秒自动切换)

核心代码：


代码如下:

$(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.jb51.net/js/2012/mybyc/
打包下载：http://www.jb51.net/jiaoben/55611.html

赞 (0)

相关推荐

  • jQuery实现个性翻牌效果导航菜单的方法

    本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jQuery flip插件实现的翻牌效果示例【附demo源码下载】

    jQuery flip插件实现的翻牌效果示例【附demo源码下载】

    本文实例讲述了jQuery flip插件实现的翻牌效果.分享给大家供大家参考,具体如下: 最近做了个类似于塔罗牌翻牌的效果,分享给大家. 运行效果图如下: 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>flip</title> <style> *{margin:0;padd

  • jQuery实现扑克正反面翻牌效果

    jQuery实现扑克正反面翻牌效果

    效果图: 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[JQuery插件]扑克正反面翻牌效果</title> <style> *{margin:0px;padding:0px;list-style:none;fon

  • jQuery 翻牌或百叶窗效果(内容三秒自动切换)

    核心代码: 复制代码 代码如下: $(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变换的方式

  • jQuery弹出div层过2秒自动消失

    下面给大家分享一段代码关于jquery弹出div层并自动消失的实现代码,废话不多说了,具体代码如下所示: var HuiFang={ m_tishi :null,//全局变量 判断是否存在div, //提示div 等待2秒自动关闭 Funtishi: function (content, url) { if (HuiFang.m_tishi == null) { HuiFang.m_tishi = '<div class="xiaoxikuang none" id="a

  • jsp图片效果大全（图像震动效果、闪烁效果、自动切换图像）

    本文主要介绍jsp实现图像震动效果.闪烁效果.自动切换图像的资料,废话不多说了,具体代码如下: 1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • jQuery实现图片与文字描述左右滑动自动切换的方法

    jQuery实现图片与文字描述左右滑动自动切换的方法

    本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • Android ViewPager实现每隔两秒自动切换图片功能

    Android ViewPager实现每隔两秒自动切换图片功能

    布局代码: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <Fr

  • jquery实现百叶窗效果

    今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~ 最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会失真了,后来经过学习,发现原来原理很简单: 基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过left值控制位置):然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也进行相应的改变. 文字描述

  • jquery实现百叶窗效果(利用li的定位)

    jquery实现百叶窗效果(利用li的定位)

    本文实例为大家分享了jquery实现百叶窗效果的具体代码,供大家参考,具体内容如下 大概思路: 一个div(宽度为800px),里面包含ul和li,li的宽高分别设置为560px,300px(li里的图片也是这个宽高).li设置绝对定位,div设置相对定位. .no0{ left:0; } .no1{ left:160px; } .no2{ left:320px; } .no3{ left:480px; } .no4{ left: 640px; } 不动画的时候,每个li宽高为160px.(80

  • jquery实现瀑布流效果 jquery下拉加载新数据

    jquery实现瀑布流效果 jquery下拉加载新数据

    瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢.今天我就来记录一下关于用jquery实现瀑布流效果的代码: 一.页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item: 2. tips是页面加载数据的时候用来提示用户的文本: <div class="wrapper"> <div class="items"> <div class="item"></div> &l

  • jQuery实现的倒计时效果实例小结

    本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • 基于jquery实现多级菜单效果

    本文实例为大家分享了jquery实现多级菜单效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } ul,li{ list

随机推荐