HTML 图片轮播

最新推荐文章于 2024-04-15 10:28:24 发布

对太阳心动

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量2.9k

点赞数 2

文章标签： html linq webview

本文链接：https://blog.csdn.net/weixin_62026595/article/details/123387483

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>图片轮播效果</title>
       <script type="text/javascript">
       var NowFrame = 1; //设置显示的第一个图片
       var MaxFrame = 4; //设置显示图片的个数
       function show() {
           for(var i=1;i<=MaxFrame;i++){
               if(NowFrame==i)
                   document.getElementById("adv"+NowFrame).style.display='block'; //当前显示图片
               else
                   document.getElementById("adv"+i).style.display='none';
               }
           if(NowFrame == MaxFrame) //判断当前图片是否是最后一个，如果是则从第一个重新轮回显示
           NowFrame = 1;
           else
               NowFrame++;   //设置下一个显示的图片
       }
       theTimer=setInterval('show()', 3000); //设置定时器，显示下一个图片
       </script>

   </head>
   <body style="background-color: #ffff7f;">//设置样式

       <body οnlοad="show()">//进入界面就加载 show 方法实现的功能效果
       <img src="图片路径1">
       <img src="图片路径2">
       <img src="图片路径3">
       <img src="图片路径4">
       </body>
   </body>
</html>