让旋转木马停止

Question

我有一个带有三个

元素的轮播。像这样：

<div role="main" class="main selection-carousel">
    <section>
        <h1>Kies je <span class="right">favoriete</span> Smaak</h1>
        <aside class="aside">
        </aside>
    </section>

    <section>
        <h1>Item 2</h1>
        <aside class="aside">
        </aside>
    </section>

    <section>
        <h1>Item 3</h1>
        <aside class="aside">
        </aside>
    </section>  

    <img src="static/img/bg-selection-carousel.png" width="2610" height="600" alt="" class="carousel-image">    
    <a href="#" title="Ga naar de volgende thee smaak" class="carousel-left">Ga naar de volgende thee smaak</a>
    <a href="#" title="Ga naar de vorige thee smaak" class="carousel-right">Ga naar de vorige thee smaak</a>
</div>

当您单击 .carousel-left 时。 向左移动 -1000 像素。第二部分是表演。当您点击右侧的轮播时。图像向右移动 1000 像素。前面的部分是显示的。

但我的轮播按钮有问题。当我在第一部分时。那么就不能右键轮播了。我怎样才能做到这一点？

当我在第一部分的时候。应该把轮播右键隐藏起来。当我进入最后一部分时。左边的旋转木马应该被隐藏。

谢谢！

这是我的 JavaScript：

$(function () {  
    var background = $(".carousel-image")
        buttonLeft = $(".carousel-left")
        buttonRight = $(".carousel-right");

    $("section").hide(); 
    $("section:first").show(); 

    buttonLeft.click(function (e) {
        e.preventDefault();
        background.animate({ left: "-=1000px" }, 1100, "easeOutQuad", function () {
            $("section:visible").hide().next().fadeIn(600); 
        }); 
    }); 

    buttonRight.click(function (e) {
        e.preventDefault();
        background.animate({ left: "+=1000px" }, 1100, "easeOutQuad", function () {
            $("section:visible").hide().prev().fadeIn(600); 
        }); 
    });
});

Answer 1

我在这里做了一个类似的轮播： http://jsbin.com/abape3/14

如果你替换将我的示例中的 input 与您的 section 进行稍微调整，您应该能够使其工作。