JS实现div内部的文字或图片自动循环滚动代码

181 阅读 0 评论 120 点赞

我是靠谱客的博主野性荔枝，最近开发中收集的这篇文章主要介绍JS实现div内部的文字或图片自动循环滚动代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<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> 