停止旋转木马

Question

我有一个带有三个<section>元素的carousel。如下所示：

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

当您单击<a> ..carousel left时。<img> go --向左转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，并对其稍作调整，您应该能够使其正常工作。