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 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery 技巧小结
Apr 02 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery实现验证码功能
Mar 17 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
Javascript call及apply应用场景及实例
Aug 26 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输出时间差函数代码
2013/01/28 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
原生JS实现萤火虫效果
2020/03/07 Javascript
vant实现购物车功能
2020/06/29 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
详解Python的三种可变参数
2019/05/08 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
实习鉴定范文
2013/12/19 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
儿园租房协议书范本
2014/12/02 职场文书
城管个人总结
2015/02/28 职场文书
公司慰问信范文
2015/03/23 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
JavaCV实现照片马赛克效果
2022/01/22 Java/Android