图片切换问题

甜萝发表于 2021-11-27 13:42

<!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;
   }
      #bj{
         width: 800px;
         margin: 0 auto;
         padding: 30px;
         background-color: #84fab0;
         text-align: center;
   }
</style>
<script>
   window.onload = function(){
         var prev = document.getElementById("prev");
         var next = document.getElementById("next");
         var img = document.getElementsByTagName("img")[0];
         var imgArr = ["C:\Users\33943\.cache\前端\img\357dd0f1fd052ffe3dce1f9eb5e7cff6.jpeg","C:\Users\33943\.cache\前端\img\27393a4ed82bae144b515038a5afde5d.jpeg"];
         var index = 0;
         prev.onclick = function(){
            index--;
            img.src = imgArr[index];
         }
         next.onclick = function(){
            index++;
            img.src = imgArr[index];
         }
   }
</script>
</head>
<body>
<div id="bj">
   <img src="C:\Users\33943\Downloads\d629294b00dd442bd9a3c8ef54c33be7.jpeg" alt="图片"><br>
   <button id="prev">上一张</button>
   <button id="next">下一张</button>
</div>
</body>
</html>

如题图片一直无法切换也不知道是是啥原因导致的有大神知道吗？

mokson 发表于 2021-11-27 16:21

亡屿歌 发表于 2021-11-27 20:16

老哥，你看看能取到图片不，严重怀疑是路径问题。。。另外，在切换时注意边界，最好加上如下判断：
         prev.onclick = function(){
            index--;
if(index<0)
{
index=imgArr.length-1;
}
            img.src = imgArr;
         }
         next.onclick = function(){
            index++;
if(index==imgArr.length)
{
index=0;
}
            img.src = imgArr;
         }

亡屿歌 发表于 2021-11-27 20:17

我试了你的代码功能上没什么问题。。。就把图片路径写成了相对就可以{:1_890:}

甜萝发表于 2021-11-27 20:26

亡屿歌发表于 2021-11-27 20:16
老哥，你看看能取到图片不，严重怀疑是路径问题。。。另外，在切换时注意边界，最好加上如下判断：

我去试一下{:1_919:}

甜萝发表于 2021-11-27 20:27

mokson 发表于 2021-11-27 16:21
next ,应该是JS的关键命令，不可以用来做变量。

好的我去查查js的关键字和保留字

页: [1]

吾爱破解 - 52pojie.cn's Archiver

图片切换问题