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函数与php函数的区别实例浅析
Jan 12 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
微信小程序删除处理详解
Aug 16 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
vue实现简单学生信息管理
May 30 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
初品cakephp 入门基础
2012/02/16 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php英文单词统计器
2016/06/23 PHP
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python autoescape标签用法解析
2020/01/17 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
求职信模板标准格式范文
2014/02/23 职场文书
电视节目策划方案
2014/05/16 职场文书
环保项目建议书
2014/08/26 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
升职感谢信
2015/01/22 职场文书
2015年工程部工作总结
2015/04/30 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
python 模块重载的五种方法
2021/04/24 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript