如何使用addEventListener在数组内部导航？

Question

I'm trying to setup a slider for a project. I have an array of objects, every object contains an image and a legend. Every time a user clicks next or previous button it should display the next or previous object of the array. Problem is it displays the same image instead of the next, the third, fifth and so on.

var index = 0;
var images = [
    {image: 'images/1.jpg', legend: 'Street Art'},
    {image: 'images/2.jpg', legend: 'Fast Lane'},
    {image: 'images/3.jpg', legend: 'Colorful Building'},
    {image: 'images/4.jpg', legend: 'Skyscrapers'},
    {image: 'images/5.jpg', legend: 'City by night'},
    {image: 'images/6.jpg', legend: 'Tour Eiffel la nuit'}
];
var previous = document.getElementById('slider-previous');
var next = document.getElementById('slider-next');

next.addEventListener('click', function() {
    img.src= images[index++].image;
    figcaption.textContent = images[index++].legend;
});
previous.addEventListener('click', function() {
    img.src= images[index--].image;
    figcaption.textContent = images[index--].legend;
});

Answer 1

It works way better, thanks Phil

next.addEventListener('click', function() {
    ++index;
    img.src= images[index].image;
    figcaption.textContent = images[index].legend;
});

previous.addEventListener('click', function() {
    --index;
    img.src= images[index].image;
    figcaption.textContent = images[index].legend;
});