超级闪电侠fff 2023-05-11 18:04 采纳率: 100%
浏览 41
已结题

通过js的DOM改变img的src的值实现图片切换

我想通过js改变img的src值来实现图片切换，源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
    *{margin:0;padding:0;}
    #outer{width:500px;margin:0 auto;background-color: aquamarine;text-align: center;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var prew=document.getElementById("prew");
            var next=document.getElementById("next");
            var img=document.getElementsByTagName("img")[0];
            var  noArr=["newProtect/140005.png" ,"newProtect\135907.png"]
             var index=0;
            prew.onclick=function(){
                index--;
                if(index<0){
                   index=1;
                }
                img.src=noArr[index]
            }
            next.onclick=function(){
            index++;
                if(index>noArr.length-1){
                    index=0;
                } 
                img.src=noArr[index]
             }
        }
    </script>
<body>
    <div id="outer">
        <img src="newProtect\135907.png" alt="方向">
        <button id="prew">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

在edge,chrome,火狐里运行都出错了，点击下一张时图片显示不出来，然后我在chrome浏览器的控制台里看见当我点击下一张时会出现 GET file:///F:/study/newProtect]907.png net::ERR_FILE_NOT_FOUND 这个错误，这是为什么啊？（我在最开始通过JS来改变src值时出现了Failed to load resource : net :: ERR _ FILE _ NOT _ FOUND这个情况，后来我通过把 img.src=值 后面的图片路径改成了绝对路径，并且前面加了三个斜线。就是///F:/study/newProtect/mark_1.png这个格式点击下一张时图片就加载出来了，后面就算把路径再改为相对路径也可以了。这和上面问题是不是有什么联系啊）

  • 写回答

2条回答 默认 最新

  • 社区专家-Monster-XH 2023-05-11 18:16
    关注

    基于Monster 组和GPT的调写：

    • 你的图片路径包含反斜杠\，但在HTML中，路径应该用正斜杠/或双反斜杠\。

    你把图片路径中的反斜杠\替换为正斜杠/，或者用双反斜杠\来表示路径。下面是修改后的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
    *{margin:0;padding:0;}
    #outer{width:500px;margin:0 auto;background-color: aquamarine;text-align: center;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var prew=document.getElementById("prew");
            var next=document.getElementById("next");
            var img=document.getElementsByTagName("img")[0];
            var noArr=["newProtect/140005.png" ,"newProtect/135907.png"];
            var index=0;
            prew.onclick=function(){
                index--;
                if(index<0){
                   index=1;
                }
                img.src=noArr[index];
            };
            next.onclick=function(){
                index++;
                if(index>noArr.length-1){
                    index=0;
                } 
                img.src=noArr[index];
             };
        };
    </script>
</head>
<body>
    <div id="outer">
        <img src="newProtect/135907.png" alt="方向">
        <button id="prew">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>
    • 在修改后的代码中，我把图片路径中的反斜杠\替换为正斜杠/，并修复了一些代码的语法错误（例如缺少分号）。

    这样修改后，应该可以正常切换图片了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月19日
  • 已采纳回答 5月11日
  • 创建了问题 5月11日

悬赏问题

  • ¥15 微信原生小程序tabBar编译报错
  • ¥350 麦克风声源定位坐标不准
  • ¥15 apifox与swagger使用
  • ¥15 egg异步请求返回404的问题
  • ¥20 Ti毫米波雷达板同步
  • ¥15 安装了kali后用VM打开，没有鼠标且无法控制怎么办啊
  • ¥15 关于#python#的问题：无功优化问题数学建模要以3机9节点为算例编写一个以最小有功网损为目标的无功优化问题，想要了解清楚其中数学建模的具体公式进行学习
  • ¥15 mvc采用element分页的问题
  • ¥15 proteus怎样构建他励直流发电机模型？
  • ¥15 求制作PPT有偿，帮