js图片循环播放

最新推荐文章于 2024-06-21 15:37:00 发布

Ali郎

最新推荐文章于 2024-06-21 15:37:00 发布

阅读量760

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_42976232/article/details/90257488

版权

java 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
   div{
       border: 1px solid red;
       width: 218px;
       height: 218px;
       margin: 50px auto;
   }
   .show{
       display: inline-block;
   }
   .hide{
       display: none;
   }
</style>
<script>
   //页面加载后
   window.onload = function(){
       var n = 0;//轮播次数
       //启动定时器
       setInterval(function(){
           n++;
           //获取所有图片
           var img = document.getElementsByTagName("img");
           //将所有图片隐藏
           for(var i = 0;i<img.length;i++){
               img[i].className = "hide";
           }
           //将下张图片显示
           var index = n%img.length;
           img[index].className = "show";
       }, 2000);
   }

</script>
<title>Insert title here</title>
</head>
<body>
   <div>
       <img src="../img/1.jpg" class="hide"/>
       <img src="../img/2.jpg" class="hide"/>
       <img src="../img/3.jpg" class="hide"/>
       <img src="../img/4.jpg" class="hide"/>
   </div>
</body>
</html>

Ali郎

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js图片循环播放

<!DOCTYPE html><html><head><meta charset="UTF-8"><style> div{ border: 1px solid red; width: 218px; height: 218px; margin: 50px aut...
复制链接

扫一扫

专栏目录