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> 

与物品被赋予动态类，以确定是否是大或变小，到一边。

您可以按更多节添加更多行，并使更新改变其类的方式与文章类四处移动以适应选定的文章和行相同。