jQuery 翻牌或百叶窗效果(内容三秒自动切换)_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

时间: 2024-08-18 17:07:54

jQuery 翻牌或百叶窗效果(内容三秒自动切换)_jquery的相关文章

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

下面给大家分享一段代码关于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="

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

jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像)_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实现的一个tab切换效果内部还嵌有切换_jquery

大致效果如图 下面是代码:自己导入jQuery包. 样式: <style type="text/css"> body,ul,li,div,a{margin:0px;padding:0px;} body{margin-top:10px;margin-left:15px;} #all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;}

jquery实现页面百叶窗走马灯式翻滚显示效果的方法_jquery

本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法.分享给大家供大家参考.具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: 复制代码 代码如下: jQuery.fn.extend((     function($){         var l = 4,//卷动行数             t=5000,//卷动完一次后,隔多长时间下次开始卷动             rt=500,//每个n卷动过去的耗时             n="li",

jQuery实现带动画效果的二级下拉导航方法_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/x

10秒自动切换 浪潮服务器让深交所新一代交易系统不惧风险

早在2008年,美国NMS修正法案要求建立全国统一的证券市场,在任何一个交易所挂牌上市的股票可以在其他交易所进行撮合交易于是,全球各大证券交易所开始更新交易系统,采用开放平台,打造更快速度,更低延时的证券交易系统. 面对激烈的国际竞争和国内证券市场的新需求,深交所提出了采用开放平台建设新一代交易系统的设想.经过长达8年的努力,2016年6月,深圳证券交易所(以下简称"深交所")第五代交易系统正式上线运行,这套交易系统由深交所基于开放平台自主研发,可容纳超过3亿个投资者账户,证券数量从原

Jquery获得控件值的三种方法总结_jquery

一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu

Jquery实现带动画效果的经典二级导航菜单_jquery

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name