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失去了与按钮的关系。只需留下元素并选择next()即可。如果选择为空，请选择first()兄弟姐妹。

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

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

最后但并非最不重要的是，有按钮点击时重启幻灯片的代码。

如何为幻灯片按钮指定正确的功能？

1 个答案: