单击以跳过幻灯片中的幻灯片

Question

我在跳过幻灯片时遇到问题。

幻灯片具有可单击以查看下一张幻灯片的按钮，幻灯片将从单击的幻灯片开始。如果我不点击任何按钮，幻灯片将通过按钮自动播放。

第一个问题是，如果我单击第三个按钮，它会显示第三张幻灯片，但第二张幻灯片在前两张幻灯片中显示两次（跳过第一张幻灯片），然后转到第三张图片，之后就可以正常工作了。 （按钮和幻灯片的自动对焦工作正常）

第二个问题是，一旦我点击第三个按钮，即使我点击了其他按钮，幻灯片也不会改变，并且幻灯片会卡在最后一张图片（第三张图片）上。

这是我的 jquery 函数。

var images, buttons, iterator = 0, index, loop;

function stopLoop() {//stop setinterval once one of buttons is clicked.
clearInterval(loop);
}

$(document).ready(function(){
$('.dotstyle button').bind("click", function(){
    stopLoop();
    slideshow($(this).index());
});
slideshow(iterator);
});

function slideshow(number){
images = $('#info-slide div'), //all slider images
buttons = $('.dotstyle button'),//all dot buttons

images.eq(number).fadeIn(800);
buttons.eq(number).focus();

loop = setInterval(function() {
    //save shown image ad focus button
    var now_button = buttons.eq(number);
    var now_image = images.eq(number);
    number += 1;//iterator for nex image
    //if is the last image go to first

    if (number == images.length) {
        number = 0;
    }

    $(now_image).fadeOut(2000);//hide shown image
    $(now_button).blur();//not focus button
    images.eq(number).fadeIn(2000);//show next image
    buttons.eq(number).focus();//focus next button
}, 6000);

}

这是我的html

    <div id = "wallpaper">
        <div id = 'info-slide'>
            <div id = "1"><img src="photo1.jpg"/></div>
            <div id = "2"><img src="photo2.jpg"/></div>
            <div id = "3"><img src="photo3.jpg"/></div>
        </div>
        <div class ="dotstyle"><!-- Pagination -->
            <button id = "b1">1</button>
            <button id = "b2">2</button>
            <button id = "b3">3</button>
        </div>
    </div>

这是我的css

#info-slide > div{
position: absolute;
display: none;
height:100%;
width: 100%;
}

我不确定我是否准确地解释了这些问题，但如果你只玩几次我的自动幻灯片，你就会知道。请给我一个解决方案

谢谢

Answer 1

隐藏所有图像然后显示选定的索引图像，在stopLoop();之后添加$('#info-slide>div').hide();