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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
解决vue addRoutes不生效问题
Aug 04 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使用百度天气接口示例
2014/04/22 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
利用Python如何生成随机密码
2016/04/20 Python
Python如何判断数独是否合法
2016/09/08 Python
Python编写登陆接口的方法
2017/07/10 Python
python破解zip加密文件的方法
2018/05/31 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
保护环境倡议书
2014/04/14 职场文书
学校联谊协议书
2014/09/16 职场文书
老人节主持词
2015/07/04 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android