html5演示文稿

Question

我一直在尋找http://html5slides.googlecode.com/svn/trunk/template/index.html#1，並想知道是否可以修改此代碼，以便可能不止一行。

例如，現在它只能左右滑動，但如果我想按下向下箭頭按下按鈕？這將需要單獨的左/右導航等單獨行等等。

我一直在試圖做到這一點，但腳本統計了所有<article>標籤，並最終將它們放在一行中。

有沒有人有關於如何嘗試它的想法或者其他一些腳本可以像上面的描述一樣工作？主要想法是結束一種可以使用箭頭在各個方向導航的網格。

Answer 1

function nextSlide() { 
     if (buildNextItem()) { 
     return; 
     } 

     if (curSlide < slideEls.length - 1) { 
     curSlide++; 
     updateSlides(); 
     } 
    } 

    function prevSlide() { 
     if (curSlide > 0) { 
      curSlide--; 
      updateSlides(); 
     } 
    } 

    function updateSlides() { 
     for (var i = 0; i < slideEls.length; i++) { 
      switch (i) { 
      case curSlide - 2: 
       updateSlideClass(i, 'far-past'); 
       break; 
      case curSlide - 1: 
       updateSlideClass(i, 'past'); 
       break; 
      case curSlide: 
       updateSlideClass(i, 'current'); 
       break; 
      case curSlide + 1: 
       updateSlideClass(i, 'next');  
       break; 
      case curSlide + 2: 
       updateSlideClass(i, 'far-next');  
       break; 
      default: 
       updateSlideClass(i); 
       break; 
      } 
     } 

     triggerLeaveEvent(curSlide - 1); 
     triggerEnterEvent(curSlide); 

     window.setTimeout(function() { 
     // Hide after the slide 
      disableSlideFrames(curSlide - 2); 
     }, 301); 

     enableSlideFrames(curSlide - 1); 
     enableSlideFrames(curSlide + 2); 

     if (isChromeVoxActive()) { 
      speakAndSyncToNode(slideEls[curSlide]); 
     } 

     updateHash(); 
    } 
    } 

這些似乎是驅動滑動翻轉的主要功能。 沒有理由，您不能將其展開爲curSlideX和curSlideY ，並且updateSlide可以橫向或縱向移動，具體取決於兩者中的哪一個發生了變化。

在HTML

你有

<section id=slides> 
     <atricle></article> 
     <atricle></article> 
     <atricle></article> 
    </section> 

與物品被賦予動態類，以確定是否是大或變小，到一邊。

您可以按更多節添加更多行，並使更新改變其類的方式與文章類四處移動以適應選定的文章和行相同。