图片切换问题

甜萝 · 发表于 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

老哥，你看看能取到图片不，严重怀疑是路径问题。。。另外，在切换时注意边界，最好加上如下判断：

[JavaScript] 纯文本查看 复制代码

            prev.onclick = function(){
                index--;
				if(index<0)
				{
					index=imgArr.length-1;
				}
                img.src = imgArr[index];
            }
            next.onclick = function(){
                index++;
				if(index==imgArr.length)
				{
					index=0;
				}
                img.src = imgArr[index];
            }

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

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

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

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

我去试一下

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

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

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

帐号		自动登录	找回密码
密码			注册[Register]

mokson mokson 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	mokson 发表于 2021-11-27 16:21 提示: 作者被禁止或删除内容自动屏蔽
	【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
	回复支持 1 举报

[求助] 图片切换问题