Question

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

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

感谢您的帮助。

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

我希望这可以帮助你。

幻灯片按钮分页

1 个答案: