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

隐藏所有图片，然后显示所选索引图片，在$('#info-slide>div').hide();

之后添加stopLoop();

点击以跳过幻灯片

1 个答案: