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 相关文章推荐
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
JS实现简单日历特效
Jan 03 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
详细分析Node.js 多进程
Jun 22 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扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php字符串过滤与替换小结
2015/01/26 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
小程序实现搜索框
2020/06/19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
生产班组长岗位职责
2014/01/05 职场文书
信息工作经验交流材料
2014/05/28 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
神秘岛读书笔记
2015/07/01 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js