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 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
理解Javascript图片预加载
Feb 23 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
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代码
2007/03/03 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
关于JavaScript中string 的replace
2013/04/12 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
详解Python中的四种队列
2018/05/21 Python
selenium+python环境配置教程详解
2019/05/28 Python
python 搜索大文件的实例代码
2019/07/08 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
关于迟到的检讨书
2014/01/26 职场文书
总经理司机岗位职责
2014/02/06 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
好学生评语大全
2014/05/05 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js