在html中用js实现div数字与图片同时循环 每一个数字对应一个图片
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 100%;
height: 40px;
}
.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;margin-top: 60px;}
</style>
</head>
<body>
<div class="content">
<dl>
<dt>测试数据1</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据2</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据3</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据4</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据5</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据6</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据7</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据8</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据9</dt>
<img src="img/banner1.png" />
</dl>
<dl>
<dt>测试数据10</dt>
<img src="img/banner1.png" />
</dl>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.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>
```