还没吃呢oO 2022-03-10 15:42 采纳率: 0%
浏览 30

js和div的相关问题

在html中用js实现div数字与图片同时循环 每一个数字对应一个图片

  • 写回答

1条回答 默认 最新

  • 沐卿゚ 2022-03-10 16:32
    关注
    

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

    ```

    评论

报告相同问题？

问题事件

  • 专家修改了标签 3月10日
  • 请详细说明问题背景 3月10日
  • 创建了问题 3月10日

悬赏问题

  • ¥15 前端vue CryptoJS Aes CBC加密后端java解密
  • ¥15 python随机森林对两个excel表格读取，shap报错
  • ¥15 基于STM32心率血氧监测（OLED显示）相关代码运行成功后烧录成功OLED显示屏不显示的原因是什么
  • ¥100 X轴为分离变量（因子变量），如何控制X轴每个分类变量的长度。
  • ¥30 求给定范围的全体素数p的(p-2)/p的连乘积值
  • ¥15 VFP如何使用阿里TTS实现文字转语音？
  • ¥100 需要跳转番茄畅听app的adb命令
  • ¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
  • ¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument