原生js实现简单轮播图效果

Love The Way You Lie 2022-04-06 07:49 354阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>首页</title>
  6.         <style>
  7.             .father{
  8.                 border: 1px solid #FF0000;
  9.                 margin: auto;
  10.                 width: 500px;
  11.             }
  12.         </style>
  13.         <script>
  14.             var i=1;
  15.             function init(){
  16.                 //定时器
  17.                 setInterval("changeImg()", 3000);  //参数 1,调用的方法 2.时间
  18.             }
  20.             function changeImg(){
  21.                 //图片数量
  22.                 if(i==3){
  23.                     i=0;
  24.                 }
  25.                 i++;
  26.                 document.getElementById("img").src = "../img/"+i+".jpg";
  27.             }
  28.         </script>
  29.     </head>
  30.     <body onload="init()">    
  31.         <div class = "father">
  32.             <!--3.轮播图部分-->
  33.             <div id="">
  34.                 <img src="../img/1.jpg" width="100%"  id="img"/>
  35.             </div>
  36.         </div>
  37.     </body>
  38. </html>

发表评论

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

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

相关阅读

    相关 原生JS实现简单的轮播图

    注意 我们用原生JS来做一个简单的无缝轮播图，首先需要准备几张**图片作为材料**，图片的链接需要自己设置，所以这边我的代码中图片链接的位置请大家自己添加图片。 ...

    迷南。迷南。/ 0 赞/ 147 阅读