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 相关文章推荐
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 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
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python为什么要安装到c盘
2020/07/20 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
辩论赛主持词
2014/03/18 职场文书
预备党员承诺书
2014/03/25 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年安全月活动总结
2015/03/26 职场文书
社区党建工作总结2015
2015/05/13 职场文书
教研活动主持词
2015/07/03 职场文书
诉讼和解协议书
2016/03/23 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书