0

http://html5slides.googlecode.com/svn/trunk/template/index.html#1を見てきましたが、このコードを変更して、複数の行が存在する可能性があるかどうか疑問に思っていました。

たとえば、今は左右にしかスライドしていませんが、下矢印を押して下に移動するにはどうすればよいですか? 別々の左右のナビゲーションなどで別々の行に移動します。

私はこれをやろうとしてきましたが、スクリプトはすべての<article>タグを数え、最終的にそれらを 1 行に配置します。

誰かがそれを試みる方法や、上記の説明のように機能する他のスクリプトについてのアイデアを持っていますか? 主なアイデアは、矢印を使用してすべての方向にナビゲートできる一種のグリッドになることです。

4

1 に答える 1

4 
  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();
     }
  }

これらは、スライド フリップを駆動する主な機能のようです。2 つのうちどちらが変更されたかに応じて、横方向または縦方向に展開して移動curSlideXできcurSlideY ない理由はありません。updateSlide

あなたが持っているhtmlで

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

記事には動的なクラスが与えられており、記事が大きいか、小さく作成されて横にずれているかを判断します。

セクションごとに行を追加し、選択された記事と行に対応するために記事のクラスが移動するのとほぼ同じように、更新によってそれらのクラスを変更します。

于 2012-07-12T15:31:36.977 に答える