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

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

你可以用按钮和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> 

Answer 2

删除此：

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

，并添加一个按钮，你的HTML：

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

Answer 3

做这样的按钮;

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

而且从JavaScript中移除

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

整个代码如下;

<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 4

您需要停止并重新开始间隔。更容易创建一个方法来做到这一点。只需像时间一样调用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(); 
}