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像素。第二部分是节目。当你点击旋转木马右边。图像向右移动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并略微调整一下，那么您应该可以使其正常工作。

让旋转木马停止

1 个答案: