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,超强推荐base.js
Dec 23 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
express express-session的使用小结
Dec 12 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
解决removeEventListener 无法清除监听的问题
Oct 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
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
vue组件父与子通信详解(一)
2017/11/07 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python标准库sched模块使用指南
2017/07/06 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
求职信的七个关键技巧
2014/02/05 职场文书
家长给学校的建议书
2014/05/15 职场文书
毕业生应聘求职信
2014/07/10 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
公司宣传语大全
2015/07/13 职场文书
高中班主任寄语
2019/06/21 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python