使用div進行旋轉木馬

我想製作旋轉木馬。但不是帶圖像的簡單傳送帶。我有這個html結構，請看下面。我有三個部分。每次都是一節節目。下面的圖片標籤是必須爲動畫的背景圖片。此圖像寬度爲3000像素。 div區域是1000像素div。當我點擊另一頁。第二部分必須顯示，下面的圖像必須滾動到-1000像素等，但它不工作....也許你可以幫助我。使用div進行旋轉木馬

<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() 
     });

來源

2011-10-18 Mike Vierwind

事實我已經把一個dem在線。 http://mikevierwind.nl/demo2/selectie.html 在這裏你可以看到問題/影響。但第二部分必須顯示，當我點擊下一個按鈕。我只能在下一個按鈕上點擊一次。 –

您需要使用

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

由於其他的另外一個定義，應該是1000像素，在這個會說，從目前的左側，取出1000像素位置。

而對於部分你可以做

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

和點擊

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

內，但仍然有你需要檢查它是否是第一項:)

來源

2011-10-18 12:55:32

但是，當我在第三/最後一節。然後我必須回來。它必須是一個旋轉木馬。但是現在我可以在箭頭按鈕上多次點擊。而且他越來越深入...阿爾斯感謝您的幫助！ –

使用div進行旋轉木馬

回答

相關問題