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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
js抽奖转盘实现方法分析
May 16 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
js获取指定的cookie的具体实现
2014/02/20 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
jQuery 判断元素整理汇总
2017/02/28 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python多线程爬虫简单示例
2016/03/04 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python批量发送post请求的实现代码
2018/05/05 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python输出指定字符串的方法
2020/02/06 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
风险评估实施方案
2014/03/09 职场文书
财务工作个人总结
2015/02/27 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
Python 中random 库的详细使用
2021/06/03 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers