JS实现div内部的文字或图片自动循环滚动代码


Posted in Javascript onApril 19, 2013
<style type="text/css"> 
.content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden} 
dl{width:400px;height:30px;border:1px solid black;} 
</style> 
<div class="content"> 
<dl> 
<dt>测试数据1</dt> 
</dl> 
<dl> 
<dt>测试数据2</dt> 
</dl> 
<dl> 
<dt>测试数据3</dt> 
</dl> 
<dl> 
<dt>测试数据4</dt> 
</dl> 
<dl> 
<dt>测试数据5</dt> 
</dl> 
<dl> 
<dt>测试数据6</dt> 
</dl> 
<dl> 
<dt>测试数据7</dt> 
</dl> 
<dl> 
<dt>测试数据8</dt> 
</dl> 
<dl> 
<dt>测试数据9</dt> 
</dl> 
<dl> 
<dt>测试数据10</dt> 
</dl> 
</div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('.content dl').hide(); 
$('.content dl:gt('+($('.content dl').length - 5)+')').show(); 
window.setInterval(function(){ 
$('.content dl:visible:first').prev().slideDown("fast",function(){ 
$(this).animate({opacity:1},2000,function(){ 
if($('.content dl:hidden').length == 0){ 
$('.content dl').hide(); 
$('.content dl:gt('+($('.content dl').length - 5)+')').show(); 
} 
}); 
}); 
},1000); 
}); 
</script>

代码演示地址:
http://www.nailyo.com/js_demo/gundong.html
Javascript 相关文章推荐
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 #Javascript
jQuery阻止同类型事件小结
Apr 19 #Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 #Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 #Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 #Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 #Javascript
JQuery 常用方法和事件详细介绍
Apr 18 #Javascript
You might like
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python与php实现分割文件代码
2017/03/06 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python读取word文本操作详解
2018/01/22 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
TCP/IP的分层模型
2013/10/27 面试题
如何开启linux的ssh服务
2015/02/14 面试题
信息工作经验交流材料
2014/05/28 职场文书
应用外语系自荐信
2014/06/26 职场文书
信仰心得体会
2014/09/05 职场文书
上班迟到检讨书
2014/09/15 职场文书
会计实训报告范文
2014/11/04 职场文书
品质保证书格式
2015/02/28 职场文书
整改通知书格式
2015/04/22 职场文书
门球健将观后感
2015/06/16 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers