將下一個按鈕添加到我的幻燈片中

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(); 
}