Question

我想制作一个旋转木马。但不是带图像的简单旋转木马。我有这个html结构，请看下面。我有三个部分。每次都是一节秀。下面的图像标记是必须是动画的背景图像。此图像宽度为3000像素。 section div是1000像素div。当我点击其他页面。第二部分必须显示，下面的图像必须滚动到-1000像素等。但它不起作用....也许你可以帮助我。

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

        <aside class="aside">
            <h2>Dol op chocola?</h2>
            <p>Proef een thee van <span>chocola, mint</span> en een beetje <span>zoethout</span></p>
            <a class="button purple" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a>   
        </aside>
    </section>

    <section>
        <h1>Kies je favoriete Smaak</h1>

        <aside class="aside">
            <h2>Dol op chocola?</h2>
            <p>Proef een thee van chocola, mint en een beetje zoethout</p>
            <a class="button" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a>  
        </aside>
    </section>

    <section>
        <h1>Kies je favoriete Smaak</h1>

        <aside class="aside">
            <h2>Dol op chocola?</h2>
            <p>Proef een thee van chocola, mint en een beetje zoethout</p>
            <a class="button" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a>  
        </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>
</div>

和javascript：

$(".selection-carousel section:nth-child(3)").hide();
        $(".selection-carousel section:nth-child(2)").hide();

        var background = $(".carousel-image");

        $(".carousel-left").click(function () {
            background.animate({ left: "-1000px" },1000);
            console.log(this);
            $(".selection-carousel section" , this).hide()
        });

Answer 1

您需要使用

background.animate({ left: "-=1000px" },1000);

由于另一个定义它应该是1000px，这将说明，从当前左侧位置移除1000px。

对于你可以做的部分

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

并在点击内

$("section:visible").hide().next().show();

但是仍然需要检查它是否是第一项：）

制作带div的旋转木马

1 个答案: