问题遇到的现象和发生背景
想给每一个图片上都添加上链接,无奈我不会,求解答
问题相关代码,请勿粘贴截图
<title></title><style>
*{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
opxqqq{ list-style-type: none;}
#box{
position: relative;
/* 定位:生成相对定位的元素,相对于其正常位置进行定位。 */
width: 512px;
height: 768px;
/* 长款大小 */
margin: 20px auto;
/* 外边框20像素依赖于运行的系统 */
}
</style>
</head>
<body>
<div id="box">
<span id="text"></span>
<div>
<img id="img" alt="">
</div>
<button id="pret">上一个</button>
<button id="next">下一个</button>
</div>
<audio autoplay="autoplay" "loop="loop" preload="auto"
src="tank.mp3">
</audio>
<!-- <a href="http://www.php.cn"><src="img/bg_1.jpg"> </a> -->
<script>
//图片地址数组
let imgArr = ["img/bg_1.jpg" ,
"img/tcs1.png",
"img/cjml.png",
"img/wzq111.png"
]
var xii=["cjdz.html","snack.html","superm.html","fivedot.html"]
let img = document.getElementById("img"); //img标签
let pret = document.getElementById("pret"); //上一个按钮dom
let next = document.getElementById("next"); //下一个按钮dom
let text = document.getElementById("text"); //文字显示
let dizhi = document.getElementById("tt");
var i = 0;
defaultImg(imgArr, img, i, text);
next.addEventListener("click", () => {
nextFn(imgArr, img)
})
pret.addEventListener("click", () => {
prextFn(imgArr, img)
})
function defaultImg(arr, img, index, text) { //默认的图片 arr-图片数组 。img是图片dom,index-是下标 text-是文字标签dom
img.src = arr[index];
text.innerText = `共计${arr.length}个游戏,当前是第${index + 1}个`
}
function prextFn(arr) { //上一张
if (i == 0) {
i = arr.length - 1;
img.src = arr[arr.length - 1];//加上这个就是到了第一张,再次点击就回到最后一张,不想要可以注释
text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
alert("已经是最后一个游戏了,点击将返回第一个"); //如果不想这样可以把这三行注释掉
return
}
i--;
img.src = imgArr[i];
text.innerText = `共计${arr.length}个游戏,当前是第${i}个游戏`
}
function nextFn(arr) { //下一张
if (i == arr.length - 1) {
i = 0;
img.src = arr[0]; //加上这个就是到了最后一张,再次点击就回到第一张,不想要可以注释
text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
alert("已经是最后一个游戏了,点击将返回第一个"); //如果不想这样可以把这三行注释掉
return
}
i++;
img.src = arr[i];
text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
}
</script>
</body>
运行结果及报错内容
我的解答思路和尝试过的方法
别人说的a标签包裹住,我只能添加上一个链接