停止旋转木马

Question

我有一个包含三个 <section> 元素的轮播。像这样：

<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> 向左移动 -1000 像素。第二部分是展示。当你点击 carousel-right 时。图像向右移动 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 并稍微调整一下，您应该能够使其工作。