JavaScrip轮播图

最新推荐文章于 2024-03-29 08:09:33 发布

小资女孩向前冲冲冲冲

最新推荐文章于 2024-03-29 08:09:33 发布

阅读量452

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Xyzlyz/article/details/124204426

版权

这是一个使用JavaScript编写的轮播图实现，通过定义数组存储图片路径，并设置定时器实现自动切换。用户还可以通过按钮手动切换图片。代码中包含了轮播图的HTML结构，JavaScript函数以及事件监听器。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">
           var ban=new Array();
           ban[0]="img/8.png";
           ban[1]="img/9.png";
           ban[2]="img/11.png";
           var j=0;
           function swap(j){
               var poto=document.getElementById("poto");
               poto.src=ban[j];
           }
           var i=0;
           function lbt(){
               var poto=document.getElementById("poto")
               poto.src=ban[i];
               i++;
               if(i==3){
                   i=0;
               }
               setTimeout("lbt()",3000);
           }
       </script>
   </head>
   <body οnlοad="lbt()">
       <div class="banner" >
           <img src="img/8.png" id="poto" >
           <div id="">
               <button οnclick="swap(0)" class="but" style="background-color: red;"></button>
               <button οnclick="swap(1)" class="but" ></button>
               <button οnclick="swap(2)" class="but"></button>
           </div>
       </div>


   </body>
</html>