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>

文章被赋予动态类以确定它们是大的，还是变小并偏向一边。

您将通过更多部分添加更多行，并让更新更改它们的类，就像文章类移动以适应选择了哪个文章和行一样。