Question

我有一个问题是滑动一些图像，其中路径是从HTML给出的，而JavaScript代码是针对所有这些图像制作的。我的问题是：如何从数组中显示第一个图像并单击下一个按钮要换第二个，第三个等等？现在只显示第四张图片。

这是我的代码和小提琴：

function clickNextHandler(e)
{
    if(progress <= 3){
    shuffle();
    }
    CheckAnswer();
    pixie.src = "res/pixiDreapta.svg";
    updateBubble(bubbles);
    nextBtn.disabled = true;

    if(progress == 4)
    {
        updateBubble(4);
        $(Objects).off('click');
        resetBtn.disabled = false; 
    }
    svgItem.setAttribute("display", "none");
};

Answer 1

我对你的代码进行了一些调整，它可以帮助你：

var imgs = $('.eticheta');
imgs.hide();
$(imgs.get(0)).show();

$('.nextButton').on('click', function(){
    var visible = $('.eticheta:visible')
       , next = visible.next();

    visible.hide();

    if ($(next.get(0)).hasClass('eticheta') === false) {
        next = $('.eticheta:first');        
    }

    next.show();
});

http://jsfiddle.net/U2T63/1/

如果不是将图像重置为第一个图像而是要禁用按钮，则应将if语句中的代码替换为：

$('.nextButton').prop('disabled', true);

滑动从阵列加载的图像

1 个答案: