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实现自适应高度表单文本框的方法
Feb 25 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
详解package.json版本号规则
Aug 01 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
js仿淘宝放大镜效果
Dec 28 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创建Cookie数组的详解
2013/07/03 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
校园创业策划书
2014/01/14 职场文书
财经学院自荐信范文
2014/02/02 职场文书
公司财务部岗位职责
2015/04/14 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
话题作文之成长
2019/12/09 职场文书
话题作文之学会尊重
2019/12/16 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技