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 相关文章推荐
iframe窗口高度自适应的实现方法
Jan 08 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
javascript实现在线客服效果
Jul 15 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
javascript中的相等操作符(==与===区别)
Dec 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 header示例代码(推荐)
2010/09/08 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP导入导出Excel代码
2015/07/07 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
python分割文件的常用方法
2014/11/01 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
简单了解Python write writelines区别
2020/02/27 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
总监职责范文
2013/11/09 职场文书
道路交通安全实施方案
2014/03/12 职场文书
春秋淹城导游词
2015/02/11 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
python如何将mat文件转为png
2022/07/15 Python