Question

我想用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>

Answer 1

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

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

Answer 2

preImage函数中需要纠正错误：

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

到

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

还有丹尼尔说的话。

JS-按钮中的简单幻灯片演示无法正常工作

2 个答案: