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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
Vue render深入开发讲解
Apr 13 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
js 解析 JSON 数据简单示例
Apr 21 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过滤html标记属性类用法实例
2014/09/23 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JS 表单验证大全
2011/11/23 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
node.js +mongdb实现登录功能
2020/06/18 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
关于Python的一些学习总结
2018/05/25 Python
代码详解django中数据库设置
2019/01/28 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
给校长的一封建议书
2014/03/12 职场文书
股权转让协议书范本
2014/04/12 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
春晚观后感
2015/06/11 职场文书
企业安全生产检查制度
2015/08/06 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书