纯javascript旋转木马

我是Javascript新手，我正在尝试用纯Javascript做一个简单的旋转木马，没有任何库，比如JQuery或Bootstrap。 这是我所拥有的，但是如果你点击“下一步”，然后点击“上一步”，图像的顺序是错误的。我做错了什么

旋转木马

var图像=[”http://www.rideboard.fr/wp-content/themes/rideboard/images/slidehome/home-06.jpg", "http://www.spotsurf.fr/wp-content/uploads/2013/02/la-graviere-spot-surf.jpg", "http://www.surfsession.com/wp-content/uploads/2013/03/landes_line_up.jpg"];
var指数=0；
函数init（）{
next（）；
}
函数间隔（）{
setInterval（函数（）{
next（）；
}, 2000);
}
函数next（）{
如果（索引>=images.length）{
指数=0；
}
如果（索引我向您提出一个替代解决方案：

function next(){
    index++; //We go to the next image
    fixIndex(index); //We check if we are out of bounds
    document.getElementById('photo').src = images[index]; //We show that image
};

function previous (){
    index--; //We go to the previous image
    fixIndex(index); //We check if we are out of bounds
    document.getElementById('photo').src = images[index]; //We show that image
};

/* Fixes "out of bound" indexes */
function fixIndex() {
    if(index >= images.length)
        index = 0;
    else if(index < 0) 
        index = images.length - 1;
};

函数next（）{
index++；//我们转到下一个图像
fixIndex（index）；//我们检查是否超出范围
document.getElementById（'photo'）.src=images[index]；//我们显示该图像
};
函数前（）{
索引--；//我们转到上一个图像
fixIndex（index）；//我们检查是否超出范围
document.getElementById（'photo'）.src=images[index]；//我们显示该图像
};
/*修复“越界”索引*/
函数fixIndex（）{
如果（索引>=images.length）
指数=0；
else if（索引<0）
索引=images.length-1；
};
您在这里有很多事情要做。但看起来这就是您要做的：

1） 在页面加载时加载图像

2） 当用户单击向右箭头时，将图片更改为数组中的下一个图片。如果我们已经超过了图像数组的末尾，则返回到第一个，产生“旋转木马”的错觉

3） 当用户单击左箭头时，将图片更改为阵列中的前一张图片。如果这会使我们位于阵列开始之前，请转到阵列中的最后一张图片，产生旋转木马的错觉

4） 这个我不确定，但看起来你想每两秒钟把图像换到下一个，对吗

你真正需要做的就是把事情简化一点

首先，创建一个函数，该函数将根据当前索引更新图像src。（您将从next（）和previous（）函数调用它）

现在，简化next（）和previous（）函数：

function next(){
    index++;
    if(index == images.length)
        index = 0;

    updateImageSrc();
}

function previous(){
    index--;
    if(index == -1)
        index = images.length - 1;

    updateImageSrc();
}

现在，让init函数更加清晰：

function init(){
    //initialize the image
    index = 0;
    updateImageSrc();

    //set up the auto slideshow dealy
    setInterval(next, 2000);//no need to wrap "next" inside a function, you can just pass in the reference to the function itself.
}

希望这有帮助。如果需要进一步的指导，请发表评论

编辑：在评论中回答海报的问题

要添加一个显示名称的标签，您需要做两件事。1）添加一个HTML元素，该元素将显示图像的名称。2）在javascript中，每当图像更改时，也要更改名称

1） 要显示名称的HTML元素：

<span id="image-name-display"></span>

这将显示您当前所在图像的索引号。如果要为每个图像添加说明或标题，请在init（）函数中添加类似的内容：

var imageTitles = ['Surfing Malibu', 'The Pipeline', 'Laie at Sunset'];

上面声明了一个图像标题数组。每个标题在数组中的位置应与其描述的图像相同

那么updateImageSrc（）函数中的代码行将是：

document.getElementById('image-name-display').textContent = imageTitles[index];

有很多不同的方法，但这种方法非常简单。希望能有所帮助。
为什么
如果（索引）这是一个错误，我尝试了另一个选项，但忘记了删除它，thanks@timp这是我的荣幸！：）是的，没错！谢谢。它也很有效，而且现在更清晰了。我正在尝试添加一个“指示器”在图像的底部，以查看您在哪个图像上。如果我单击一个按钮，它将显示正确的图像。但我不知道如何操作。您能帮我吗？或者有什么想法吗？谢谢对我的答案进行编辑，显示如何添加“指示器”。
<span id="image-name-display"></span>

function updateImageSrc(){
    document.getElementById('photo').src = images[index];

    document.getElementById('image-name-display').textContent = index.
}

var imageTitles = ['Surfing Malibu', 'The Pipeline', 'Laie at Sunset'];

document.getElementById('image-name-display').textContent = imageTitles[index];