带有按钮分页的幻灯片

Question

我想创建带有按钮的自动幻灯片，我可以单击这些按钮来查看幻灯片中的一张幻灯片。如果我单击其中一个按钮，幻灯片将从与单击的按钮配对的幻灯片开始（为了更好地理解，假设有 3 张图像幻灯片和三个按钮，每个按钮都与这些幻灯片中的每一张配对）。如果我不点击按钮，就像自动幻灯片一样，我希望每个按钮都聚焦（.focus（））（就像第一张图片幻灯片出现时，第一个按钮将被聚焦。第二张图片幻灯片 - >第二个按钮.focus() 等）

到目前为止，我已经使用 setInterval 完成了自动幻灯片放映。幻灯片放映开始时，自动对焦按钮不会同时启动。当第二张图片出现时，第一个按钮将被聚焦，每个按钮最终按顺序聚焦，但与幻灯片不匹配。

这是我用于幻灯片和按钮的 jquery 函数。

$(document).ready(function(){
var i = 1;
setInterval(function() {
    $('div.dotstyle button:nth-child('+i+')').focus();
    i++;
    if(i == 4){i = 0;}
    },  6000);
});

$(document).ready(function(){
$("#wallpaper #info-slide > div:gt(0)").hide();
setInterval(function() { 
    $('#wallpaper #info-slide > div:first-child').fadeOut(2000).next().fadeIn(2000).end().appendTo('#wallpaper #info-slide');
    },  6000);
});

这是 HTML 代码

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

这是用于按钮的 css（您可能想知道）

.dotstyle button {
outline: none;
margin-left: 20px;
width: 15px;
height: 15px;
border-radius: 50%;
text-indent: -999em; /* make the text accessible to screen readers */
}   

.dotstyle button:hover,
.dotstyle button:focus {
background-color: black;
opacity: 0.5;
}

我不想将第一个按钮设置在 setInterval 函数之外，因为我认为我上面解释的功能是将每张幻灯片分配给每个按钮，以便我可以单击按钮查看分配的幻灯片，幻灯片从该幻灯片需要点击功能来检测用户的点击并使用索引更改图像。我实际上想要求解决此功能。如果有更好的想法请告诉我。

所以我的第一个问题是如何修复与幻灯片放映同时启动的自动对焦按钮，第二个问题是为了更好地实现该功能。

感谢您的帮助。

Answer 1

试试这个脚本，为我工作：

$(document).ready(function(){
    var images = $('#info-slide div'), //all slider images
        buttons = $('.dotstyle button'),//all dot buttons
        iterator = 0;

    //set the start point of slider
    $(buttons).get(0).focus();
    $(images.get(0)).fadeIn(800);

    //every 6 seconds
    setInterval(function() { 
        //save shown image ad focus button
        var now_button = buttons.get(iterator),
            now_image = $(images.get(iterator))

        iterator += 1;//iterator for nex image

        //if is the last image go to first
        if (iterator == images.length) {
            iterator = 0;
        }


        $(now_image).fadeOut(2000);//hide shown image
        $(now_button).blur();//not focus button
        $(images.get(iterator)).fadeIn(2000);//show next image
        buttons.get(iterator).focus()//focus next button

    }, 6000);
})

我想是图片的 css：

#info-slide div{
  position:absolute;
  top:0;
  left:0;
  display:  none;
}

希望对你有帮助。