无法让我的幻灯片显示工作

时间:2015-01-29 11:57:22

标签: javascript slideshow setattribute

我正在制作一个简单的幻灯片,它有后退和前进按钮。 这是代码

<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)不会显示为图像。 帮助

2 个答案:

答案 0 :(得分:2)

与@ozil相同,您只需更新src属性即可。但主要的错误是你试图修改一个不存在的属性。现在,您正在尝试设置名为src, imageN.png的属性,其中N是当前图像编号,当然不存在。由于setAttribute()需要两个参数,即您要更改的属性和新值,因此您必须将代码更改为:

img.setAttribute("src", "image" + slide + ".png");

注意 您在调用removeAttribute()之前不必使用setAttribute()

答案 1 :(得分:0)

不需要删除
img.removeAttribute("src");
仅更新src attribute