如何为幻灯片按钮分配正确的功能？

Question

我正在尝试制作这个小幻灯片，它可以工作，但我无法为按钮编写正确的功能。我希望每次单击按钮时，都会显示其相关的 div。然后幻灯片继续正常播放。

演示：http://jsfiddle.net/sabeti05/dsagcc5u/

html

    <div id="slideshow">
       <div class=" hide block">
        one
       </div>
       <div class="hide">
        two
       </div>
       <div class="hide">
        three
       </div>
    </div>
    <button class="one">one</button>
    <button class="two">two</button>
    <button class="three">three</button>

css

body{text-align:center}
#slideshow {
    height: 40px;
    margin: 0 auto;
    position: relative;
    width: 100px;
}
#slideshow > div {
    position: absolute;
}
.hide {
    display: none;
}
.block {
    display: block;
}

jquery

$(document).ready(function(){
    setInterval(function() {
      $('#slideshow > div.block')
        .removeClass("block")
        .next()
        .addClass("block")
        .end()
        .appendTo('#slideshow');
    },  1000);
});

Answer 1

看看我为您制作的 changes 演示。

你通过旋转 DOM 元素做了非常聪明的把戏，但那样 div 就失去了它们与按钮的关系。只需将元素留在原地并 select next()。如果selection为空，select first()兄弟姐妹

标记也需要更改，以便按钮具有 type="button"（从而避免它们的默认类型 submit）并将它们包含在 div #controls 中。

现在您可以将单个事件侦听器绑定到 button 元素上容器的 click 事件。在 listener 中，在容器中找到它的索引，并在 jQuery selectors 的帮助下显示相应的 div。（请注意，对于 jQuery 1.6.4，您必须使用 bind 而不是 on 来绑定事件处理程序。）

最后但同样重要的是，有在单击按钮时重新启动幻灯片的代码。

如何为幻灯片按钮分配正确的功能？

how to assign correct function to button of slideshow?

html

css

jquery

slideshow