我想通过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这个格式点击下一张时图片就加载出来了,后面就算把路径再改为相对路径也可以了。这和上面问题是不是有什么联系啊)