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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
Angular 表单控件示例代码
Jun 26 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
vue实现购物车的监听
Apr 20 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
opencv实现图像几何变换
2021/03/24 Python
怎样填写就业意向
2014/04/02 职场文书
岗位说明书范文
2014/05/07 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
无保留意见审计报告
2015/06/05 职场文书
学校教学管理制度
2015/08/06 职场文书
无故旷工检讨书
2015/08/15 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS