JS 中的简单幻灯片放映 - 按钮无法正常工作答案

【问题标题】：simple slide show in JS- buttons are not working properlyJS 中的简单幻灯片放映 - 按钮无法正常工作
【发布时间】：2019-04-21 05:35:18
【问题描述】：

我想在 html 中创建一个显示单个图像的基本页面。我还添加了两个按钮“上一个”和“下一个”。这些按钮应该允许用户向前或向后移动。总共有6张图片。当用户到达幻灯片放映的结尾（或单击后退按钮时开始）时，幻灯片不应环绕到开头（或结尾）。这两种情况的按钮 onclick 功能都不起作用。它只会显示 img src 属性中提到的第一张图像。

这是我到目前为止所做的。我将所有图像放入一个数组中，并尝试根据按钮单击来前后移动数组。

<body>
<img src="img1.jpg" id="demo" style="width:400px;height:600px"/img>
<br/>
<input type="button" onclick="preImage()" value="Previous                                 
">
<input type="button" onclick = "nextImage()" value="Next                                            
">
<script>
var slider_content = document.getElementById("demo");
var image = ['img1','img2','img3','img4','img5','img6'];

var i = image.length;

function nextImage(){
if(i<image.length){
    i=i+1;
}else{
    i=1;
}
slider_content.innerHTML="<img src="+image[i-1]+".jpg>";
}
function preImage(){
if(i<image.length+1 && i>1){
    i=i-1;
}else{
    i=image.length;
}
  slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
}
</script>
</body>

【问题讨论】：

您需要反斜杠用于设置src 属性的双引号，并且您的第一个slider_content.innerHTML 没有双引号来结束属性值，至于您的第二个slider_content.innerHTML永远不要用双引号关闭字符串。建议您打开浏览器控制台查看显示的错误。
其实你想把slide_content.innerHTML换成slide_content.src =image[i-1];

标签： javascript html

【解决方案1】：

为您的图像创建一个包装 div 并更改该 div 的 innerHTML。

<div id="demo" style="width:400px;height:600px">
   <img src="img1.jpg">
</div>

【讨论】：

【解决方案2】：

preImage 函数中需要纠正一个错误：

slide_content.innerHTML = "<img src="+image[i-1]+".jpg">

到

slider_content.innerHTML = "<img src="+image[i-1]+".jpg>";

还有丹尼尔所说的。

【讨论】：