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>

给文章提供动态类，以确定它们是大的，还是小的并且偏向一边。

您可以按更多部分添加更多行，并让更新更改其类，方式与文章类移动以适应选择的文章和行相同。

html5演示文稿

1 个答案: