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代码
Sep 04 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 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 mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
List Installed Software Features
2007/06/11 Javascript
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
小程序自动化测试的示例代码
2020/08/11 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python opencv实现运动检测
2018/07/10 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
创立科技Java面试题
2015/11/29 面试题
实习生工作证明范本
2014/09/14 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL