Javascript 带按钮的幻灯片

Question

我想知道如何为我的 javascript 幻灯片创建 'previous image' 按钮。这是我到目前为止的代码..

<img id="slide" height="300" width="300" src="images/1.jpg">
<br />
<button id="previous">Previous Slide</button>
<button id="next" >Next Slide</button>

var i = 1;
var images = [];

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";

var nextImage = function () {
    document.getElementById("slide").src = images[i];   

    if (i < images.length -  1) {
        i++;    
    }
    else {
        i=0;    
    }
}

var previousImage = function () {
    document.getElementById("slide").src = images[i];
}


document.getElementById("next").addEventListener("click", nextImage);
document.getElementById("previous").addEventListener("click", previousImage);

如您所见，我对如何使用我的 previousImage 函数来完成这项工作一无所知。有什么想法吗？

Answer 1

试试这个：

var i = 0;
var images = [];

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";

var nextImage = function () {

    if (i < images.length) {
            i++;      
    }
    else {
        i=0;    
    }
    document.getElementById("slide").src = images[i];   

}

var previousImage = function () {
    if (i > 0)
      i--;      
    }
    else {
        i=images.length-1;
    }
    document.getElementById("slide").src = images[i];
}

Javascript 带按钮的幻灯片

Javascript Slideshow with buttons

html

javascript

slideshow