【Web】JavaScript实现轮播图效果

迷南。 2023-02-28 01:23 117阅读 0赞

轮播图就是网页到达一定时间就切换图片。要用到定时器功能，直接改变img的src

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播图</title>
  6. </head>
  7. <body>
  8.     <img id="img" src="img/banner_1.jpg" width="100%">
  9.     <script>
  10.         //修改图片src属性
  11.         var number = 1;
  12.         function f() { 
  13.             number++;
  14.             if (number > 3) { 
  15.                 number = 1;
  16.             }
  17.             var img = document.getElementById("img");
  18.             img.src = "img/banner_" + number + ".jpg";
  19.         }
  20.         //每隔3秒切换一次
  21.         setInterval(f,3000);
  22.     </script>
  24. </body>
  25. </html>

运行效果： 每隔3秒切换一次
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读