javascript - 有人可以帮我解决这个与图片幻灯片有关的问题吗?
问题描述
我不知道问题是否在于我将脚本放在 html 文件中,无论如何幻灯片无法正常工作,我想问是否有人可以帮我解决这个问题,代码如下。不知何故,幻灯片无法正常工作,但图片显示在实时服务器中
<!DOCTYPE html>
<html>
<body style="color:black">
<a href='https://postimg.cc/ZWcwYbzT' target='_blank'><img id="image" src='https://i.postimg.cc/ZWcwYbzT/172374980-914208975812746-8979130836703230386-n.jpg' border='0' width="100" alt='172374980-914208975812746-8979130836703230386-n'/></a>
<a href='https://postimg.cc/QV9dZVZr' target='_blank'><img id="image1" src='https://i.postimg.cc/QV9dZVZr/172124635-284285833185228-6477325913542767940-n.jpg' border='0' width="100" alt='172124635-284285833185228-6477325913542767940-n'/></a>
<br>
<input type="button" value="Start Slide Show" onClick="startSlideShow()">
<input type="button" value="Stop Slide Show" onClick="stopSlideShow()">
<script>
<input type="button" value="Start Slide Show" onClick="startSlideShow()">
<input type="button" value="Stop Slide Show" onClick="stopSlideShow()">
<script>
var intervalID;
function startSlideShow(){
intervalID = setInterval(changeImage, 800);
}
function stopSlideShow(){
clearInterval(intervalID);
}
function changeImage(){
var imageSrc = document.getElementById("image").getAttribute("src");
var currentImageNumber = imageSrc.substring(imageSrc.lastIndexOf("/") + 1, imageSrc.lastIndexOf("/") + 2);
if(currentImageNumber == 7){
currentImageNumber = 0;
}
document.getElementById("result").innerHTML = currentImageNumber;
document.getElementById("image").setAttribute("src", "images/" + (Number(currentImageNumber)+1) + ".jpg");
}
changeImage();
</script>
</body>
</html>
解决方案
问题在于这部分:
<input type="button" value="Start Slide Show" onClick="startSlideShow()">
<input type="button" value="Stop Slide Show" onClick="stopSlideShow()">
<script>
在您的代码中连续出现两次。所以你的脚本中有 HTML 标签,这会产生语法错误。删除第二次出现,你会没事的。