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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
基于JSON数据格式详解
Aug 31 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
js实现轮播图特效
May 28 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实现从身份证中提取生日
2016/05/09 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python素数筛选法浅析
2018/03/19 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python GUI编程完整示例
2019/04/04 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
优秀老师事迹材料
2014/02/05 职场文书
材料会计岗位职责
2014/03/06 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript