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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
我的论坛源代码(一)
2006/10/09 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
基于Python List的赋值方法
2018/06/23 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python文件读写常见用法总结
2019/02/22 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
自主招生自荐书
2013/11/29 职场文书
真诚的求职信
2014/07/04 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
财务人员入职担保书
2015/09/22 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers