用javascript实现图片的切换

最新推荐文章于 2022-03-28 09:05:58 发布

傻她你呀

最新推荐文章于 2022-03-28 09:05:58 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 图片图片切换切换图片

本文链接：https://blog.youkuaiyun.com/qq_41672008/article/details/86550656

javascript 专栏收录该内容

61 篇文章

订阅专栏

这篇博客通过JavaScript展示了如何实现在网页中切换图片的功能。通过创建一个包含图片路径的数组，然后利用事件监听器为‘上一张’和‘下一张’按钮绑定点击事件，动态改变img标签的src属性，从而实现图片的切换效果。同时，代码中还包括了用于显示当前图片索引的提示信息更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先把相应的图片路径添加到存储图片路径的数组imgArr里，之后运行代码就可以实现图片的切换了

以下是代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }

           #outer{
               /* position: fixed; */
               width: 2000px;
               /* height: 1200px; */
               margin: 0 auto;
               /* padding: 20px; */
               /* background-color: greenyellow; */
               /*设置文本居中*/
               text-align: center;
           }

       </style>

       <script type="text/javascript">
           window.onload = function(){

               /*
               *   点击按钮切换图片
               *        点击上一张，切换到上一张
               *        点击下一张，切换到下一张
               */

               //获取两个按钮
               var prev = document.getElementById("prev");
               var next = document.getElementById("next");

               //获取提示文字对象
               var info = document.getElementById("info");

               /*
               *   要切换图片就是要修改img标签的src属性
               */

               var img = document.getElementsByTagName("img")[0];
               //这是一个数组
               //alert(img);

               //创建一个数组来保存一个图片的路径
               var imgArr = ["img/02.png","img/05.png","img/06.png","img/07.png","img/10.png","img/11.png","img/12.png"];


               //创建一个变量,来保存当前正在显示图片的索引
               var index = 0;

               info.innerHTML = "一共"+imgArr.length+"张，现在是第"+(index+1)+"张~~~";
               //分别为两个按钮来绑定单击响应函数
               prev.onclick = function(){

                   //alert("上一张");
                   index--;
                   if(index <= 0){
                       index = 0;
                   }
                   //切换图片就是要修改img标签的src属性
                   info.innerHTML = "一共"+imgArr.length+"张，现在是第"+(index+1)+"张~~~";
                   img.src = imgArr[index];

               };

               next.onclick = function(){

                   //alert("下一张");
                   index++;
                   if(index >= imgArr.length-1){
                       index = imgArr.length-1;
                   }
                   //切换图片就是要修改img标签的src属性
                   info.innerHTML = "一共"+imgArr.length+"张，现在是第"+(index+1)+"张~~~";
                   img.src = imgArr[index];

               };


           };

           /* window.onscroll=function(){
               var prev = document.getElementById("prev");
               var t = document.documentElement.scrollTop || document.body.scrollTop;
               prev.style.top=t+"px";
               var next = document.getElementById("next");
               var t = document.documentElement.scrollTop || document.body.scrollTop;
               next.style.top=t+"px";
               } */

       </script>

   </head>
   <body>
       <div id="outer">

           <p id="info"></p>

           <img src="img/02.png" alt="烟花"/>
           <br />
           <button id="prev">上一张</button>
           <button id="next">下一张</button>

       </div>
   </body>
</html>