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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
vue v-on监听事件详解
May 17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
功能强大的php文件上传类
2016/08/29 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
python处理json数据中的中文
2014/03/06 Python
Python pickle模块用法实例
2015/04/14 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
销售员态度差检讨书
2014/10/26 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2015年保送生自荐信
2015/03/24 职场文书
感恩教师主题班会
2015/08/12 职场文书
班委竞选稿范文
2015/11/21 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python