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 相关文章推荐
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 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制作静态网站的模板框架(四)
2006/10/09 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php实现求相对时间函数
2015/06/15 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python进程间通信用法实例
2015/06/04 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
python 高阶函数简单介绍
2021/02/19 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
个人贷款承诺书
2014/03/28 职场文书
结对共建工作方案
2014/06/02 职场文书
县委务虚会发言材料
2014/10/20 职场文书
教师节班会主持词
2015/07/06 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL