Question

我是Javascript的新手，我正在尝试用纯Javascript做一个简单的轮播，没有任何像JQuery或Bootstrap这样的库。这就是我所拥有的，但如果你点击下一个然后再点击前一个图像的顺序是错误的。我究竟做错了什么？ https://jsfiddle.net/ddLxvzoj/1/

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</title>
    <link rel="stylesheet" href="carousel.css">
</head>
<body onload="init()">
<script src="carousel.js"></script>
<div id="carousel">
    <ul>
        <li><img id="photo" src=""></li>
    </ul>
    <a  class="arrow left-carousel" href="#" onclick="previous()"> < </a>
    <a  class="arrow right-carousel" href="#" onclick="next()"> > </a>
</div>
</body>

var images = ["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 index = 0;

function init() {
    next();
}

function interval(){
    setInterval(function (){
        next();
    }, 2000);
}

function next(){
    if(index >= images.length) {
        index = 0;
    }
    if(index <= -1){
        index = 1;
    }
    document.getElementById('photo').src = images[index];
    index++;
}

function previous (){

    if (index <= -1) {
        index = images.length - 1;
    }
    if (index >= images.length) {
        index = 1;
    }
    document.getElementById('photo').src = images[index];
    index--;

}

编辑：现在我正在尝试在图像底部添加“指示符”，以便查看您的图像。如果单击一个按钮，则会显示正确的图像。但我不知道该怎么做。

Answer 1

你在这里有很多事情要做。但看起来这就是你要做的事情：

1）在页面加载

上加载图像

2）当用户单击右箭头时，将图片更改为数组中的下一个。如果我们过了图像数组的末尾，那就回到第一个图像，给出一个＆＃34;旋转木马的错觉＆＃34;

3）当用户单击向左箭头时，将图片更改为阵列中的上一张图片。如果这会将我们放在数组的开头之前，请转到数组中的最后一个图像，给出旋转木马的错觉。

4）这个我不确定，但看起来你正试图让图像每两秒更换一次。是吗？

你真正需要做的就是简化一些事情。

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

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

现在，简化你的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>

2）在javascript中更新它。我建议将updateImageSrc（）函数修改为以下内容：

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

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

这将显示您当前所在图像的索引号。如果您想要每张图片的描述或标题。您可能希望在init（）函数中添加类似的内容：

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

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

然后updateImageSrc（）函数中的代码行为：

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

有许多不同的方法可以做到这一点，但这种方式非常简单。希望它有所帮助。

Answer 2

我建议你一个替代解决方案：

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

纯javascript轮播

2 个答案: