javascript - 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>

文章被赋予动态类来确定它们是否很大，或者是否变小并放在一边。

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