在我的幻灯片中添加下一个按钮

Question

我想在此脚本中添加下一个按钮，而不是让它按时间间隔更改图像。我该怎么做？

代码如下：

<script src="viewimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", ""+galleryarray[curimg])
    curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
    setInterval("rotateimages()", 4500)
}
</script>

<div style="width: 500px; height: 500px">
<img style="width: 100%; height: 100%;" id="slideshow" src="boston1.JPG" />
</div>

Answer 1

删除这个：

window.onload=function(){
    setInterval("rotateimages()", 4500)
}

并在 HTML 中添加一个按钮：

<button onclick="rotateimages()">Next</button>

Answer 2

制作一个这样的按钮；

 <button onclick="rotateimages()">Next</button>

并移除

window.onload=function(){
    setInterval("rotateimages()", 4500)
}

来自你的javascript

整个代码看起来像；

<script src="viewimages.php"></script>    
<script type="text/javascript">

var curimg=0
function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", ""+galleryarray[curimg])
    curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

</script>

<div style="width: 500px; height: 500px">
    <img style="width: 100%; height: 100%;" id="slideshow" src="boston1.JPG" />
</div>
<button onclick="rotateimages()">Next</button>

Answer 3

您将需要停止并重新开始间隔。更容易创建一个方法来做到这一点。并且像时代一样调用 rotateimages 。如果你不想要间隔，就去掉 restartInterval 方法。

var curimg=0
function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", ""+galleryarray[curimg])
    curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

var _timer;
function restartInterval() {
    if(_timer) window.clearInterval(_timer);
    _timer = setInterval(rotateimages, 4500)
}

function next() {
    restartInterval();
    rotateimages();
}


window.onload=function(){
    restartInterval();
}

Answer 4

您可以使用按钮和 onclick 事件来完成此操作。使用您自己的 rotateimage 函数并通过 onclick 将其添加到您的 html 按钮。按钮可能是这样的：

<button onclick="rotateimages()">Next</button>

您的洞口代码：

<script type="text/javascript">

var curimg=0
function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", ""+galleryarray[curimg])
    curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}
</script> 

<!-- Your new button -->
<button onclick="rotateimages()">Next</button>


<div style="width: 500px; height: 500px">
<img style="width: 100%; height: 100%;" id="slideshow" src="boston1.JPG" />
</div>

在我的幻灯片中添加下一个按钮

Adding a next button to my slideshow

javascript

slideshow