jQuery循环滚动展示代码 可应用到文字和图片上


Posted in Javascript onMay 11, 2012

看见有的同学用 Adam Cai 的代码,感觉稍显复杂而且不够 jQuery。我用只依靠 jQuery 入门的思路写了一版,代码更少使用也更简单。

在线演示: http://demo.3water.com/js/2012/jquery_xhpic/
jQuery循环滚动展示代码 可应用到文字和图片上
[JavaScript]代码

$(document).ready(function(){ 
$("#sItem li:not(:first)").css("display","none"); 
var B=$("#sItem li:last"); 
var C=$("#sItem li:first"); 
setInterval(function(){ 
if(B.is(":visible")){ 
C.fadeIn(500).addClass("in");B.hide() 
}else{ 
$("#sItem li:visible").addClass("in"); 
$("#sItem li.in").next().fadeIn(500); 
$("li.in").hide().removeClass("in")} 
},3000) //每3秒钟切换一条,你可以根据需要更改 
})

HTML 部分:
<ul id="sItem"> 
<li>文字或图片</li> 
<li>文字或图片</li> 
<li>文字或图片</li> 
</ul>
Javascript 相关文章推荐
Jquery练习之表单验证实现代码
Dec 14 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 #Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 #Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 #Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 #Javascript
jQuery 过滤not()与filter()实例代码
May 10 #Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 #Javascript
javascript 在firebug调试时用console.log的方法
May 10 #Javascript
You might like
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
python正则分组的应用
2013/11/10 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python实现汽车管理系统
2018/11/30 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
python模块内置属性概念及实例
2021/02/18 Python
战友聚会邀请函
2014/01/18 职场文书
国培计划培训感言
2014/03/11 职场文书
计算机系本科生求职信
2014/05/31 职场文书
市场营销专业求职信
2014/06/17 职场文书
卖房协议书样本
2014/10/30 职场文书
2015年护士节慰问信
2015/03/23 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书