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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
JS轮播图的实现方法
Aug 24 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
基于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
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
计算机专业自荐信
2013/10/14 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
总结Python常用的魔法方法
2021/05/25 Python
Python Django项目和应用的创建详解
2021/11/27 Python