带按钮分页的幻灯片

Question

我想创建带有按钮的自动幻灯片放映，我可以单击这些按钮来查看幻灯片放映中的一张幻灯片。如果我单击其中一个按钮，幻灯片将从与单击的按钮配对的幻灯片开始（为了更好地理解，假设有 3 张图片幻灯片和三个按钮，每个按钮都与这些幻灯片中的每一张配对）。如果我不点击按钮，就像自动幻灯片放映一样，我希望每个按钮都聚焦（.focus（））（就像第一张图片幻灯片出现时，第一个按钮将被聚焦。第二张图片幻灯片 - >第二 button.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 函数之外的焦点，因为我认为我上面解释的功能，将每张幻灯片分配给每个按钮，以便我可以单击按钮查看分配的幻灯片和幻灯片从那张幻灯片开始，需要点击功能来检测用户的点击并使用 index.js 更改图像。我其实想问这个功能的解决方案。如果有更好的想法请告诉我

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

感谢您的帮助。

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;
}

希望对你有所帮助

带按钮分页的幻灯片

slideshow with button pagination

html

javascript

jquery

slideshow