图片轮播案例

最新推荐文章于 2024-01-27 20:21:08 发布

Ward_Tian

最新推荐文章于 2024-01-27 20:21:08 发布

阅读量243

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Ward_Tian/article/details/83067415

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
   div{
   border:3px solid red;
   width:218px;
   height:145px;
   }
   .show{
       display:inline-block;
   }
   .hide{
   display:none;
   }
</style>

</head>
<body>
   
   <div οnmοuseοver="pause();"
   οnmοuseοut="lunbo();">
   <img src="../images/1.jpg" class="show"/>
   <img src="../images/2.jpg" class="hide"/>
   <img src="../images/3.jpg" class="hide"/>
   <img src="../images/4.jpg" class="hide"/>
   </div>
   <script>
   var id=null;
   var index=0;
   function lunbo(){
       id=setInterval(function(){
           index++;
           //获取所有图片注意是getElementsByTagName!!!
       var imgs = document.getElementsByTagName("img");
           //隐藏所有图片
   for(var i=0;i<imgs.length;i++){
       imgs[i].className="hide";
   }
       //显示下一张图片
           var next=index%imgs.length;
       imgs[next].className="show";
       },2000);

   }
   function pause(){
   clearInterval(id);
   }
   lunbo();
</script>
</body>
</html>