js点击图片切换练习

毛毛淘气

已于 2022-04-19 18:53:56 修改

阅读量392

点赞数 1

文章标签： javascript 前端

于 2022-04-19 18:40:51 首次发布

本文链接：https://blog.csdn.net/weixin_59357486/article/details/124280611

版权

这是一个使用HTML、CSS和JavaScript实现的图片轮播功能。代码中定义了上一张和下一张按钮，点击可以切换图片，同时更新当前显示的图片索引，并在页面上显示当前图片的编号。当达到图片数组的边界时，轮播会自动回转或停止。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       *{
           margin: 0 auto;
           padding: 0;
       }
       #outer{
           margin-top: 20px;
           width: 110px;
           background: #8A2BE2;
           padding: 10px;
           text-align: center;
       }
       </style>
       <script type="text/javascript">
       window.onload = function(){
           var prev =document.getElementById("prev");
           var next =document.getElementById("next");
           var img = document.getElementsByTagName("img")[0];
           var imgArr=["../img/01.png","../img/02.png","../img/03.png","../img/04.png","../img/05.png"]
           var index= 0;
           var info =document.getElementById("info");
           info.innerHTML="当前第"+(index+1)+"张";

           prev.οnclick=function(){
               index--;
               if(index<0){
                   index=0;
               }
               img.src=imgArr[index];
               info.innerHTML="当前第"+(index+1)+"张";

           }
           next.οnclick=function(){
               index++;
               if(index>imgArr.length-1){
                   index=imgArr.length-1;
                   alert("最后一张啦")
               }
               img.src=imgArr[index];
               info.innerHTML="当前第"+(index+1)+"张";
           }

       }


       </script>
   </head>
   <body>
       <div id="outer">
           <p id="info"></p>
           <img src="../img/01.png" alt="打不开"/>
           <button id="prev"><上一张</button>
           <button id="next">下一张></button>
       </div>

   </body>
</html>