无法让我的幻灯片工作
cant get my slideshow to work
我正在制作一个带有后退和前进按钮的简单幻灯片。
这是代码
<div align="center">
<img src="prev.png" alt="previous" align="absmiddle" width="30" height="30" onClick="prev();"><img src="image 1.png" id="img" alt="slideshow"><img src="next.png" alt="next" align="absmiddle" width="30" height="30" onClick="next();">
</div>
<script>
var slide = 1;
var img = document.getElementById('img');
if (slide == 4) {
slide = 1;
}
function next() {
slide += 1;
img.removeAttribute("src");
img.setAttribute("src, image " + slide + ".png");
}
function prev() {
slide -= 1;
img.removeAttribute("src");
img.setAttribute("src, image " + slide + ".png");
}
</script>
下一个和上一个按钮工作正常,但图像(图像 1.png、图像 2.png 和图像 3.png)没有显示为图像。
有帮助吗?
不需要删除
img.removeAttribute("src");
只更新 src
attribute
就像@ozil 所说的那样,您只需要更新 src
属性。但主要错误是您试图修改不存在的属性。现在您正在尝试设置一个名为 src, imageN.png
的属性,其中 N
是当前图像编号,这当然不存在。由于 setAttribute()
需要两个参数,即您要更改的属性和新值,因此您必须将代码更改为:
img.setAttribute("src", "image" + slide + ".png");
注意 在调用 setAttribute()
.[=17 之前不必使用 removeAttribute()
=]
我正在制作一个带有后退和前进按钮的简单幻灯片。 这是代码
<div align="center">
<img src="prev.png" alt="previous" align="absmiddle" width="30" height="30" onClick="prev();"><img src="image 1.png" id="img" alt="slideshow"><img src="next.png" alt="next" align="absmiddle" width="30" height="30" onClick="next();">
</div>
<script>
var slide = 1;
var img = document.getElementById('img');
if (slide == 4) {
slide = 1;
}
function next() {
slide += 1;
img.removeAttribute("src");
img.setAttribute("src, image " + slide + ".png");
}
function prev() {
slide -= 1;
img.removeAttribute("src");
img.setAttribute("src, image " + slide + ".png");
}
</script>
下一个和上一个按钮工作正常,但图像(图像 1.png、图像 2.png 和图像 3.png)没有显示为图像。 有帮助吗?
不需要删除
img.removeAttribute("src");
只更新 src
attribute
就像@ozil 所说的那样,您只需要更新 src
属性。但主要错误是您试图修改不存在的属性。现在您正在尝试设置一个名为 src, imageN.png
的属性,其中 N
是当前图像编号,这当然不存在。由于 setAttribute()
需要两个参数,即您要更改的属性和新值,因此您必须将代码更改为:
img.setAttribute("src", "image" + slide + ".png");
注意 在调用 setAttribute()
.[=17 之前不必使用 removeAttribute()
=]