1

タブレット用のHTML5アプリケーションを開発しています。アイデアは次のとおりです。アプリは5つの記事で構成され、各記事には10ほどのスライドがあります。各スライドは画面に完全にフィットし、次または前のスライドに移動するための左/右ボタンがあります。また、スライドにはjQueryアニメーション、タイマー設定などが含まれている場合があります。すべての記事が一覧表示され、ユーザーがそれらに移動できるトップレベルのメニューもあります。

したがって、現在5つのhtmlファイルがあり、各ファイルには10個のDIVがあり、ユーザーの操作に基づいてdivを非表示/表示するロジックがあります。要件は、5つのファイルすべてを1つの単一のHTMLファイルにマージすることです。理由-記事間の移行をスムーズにするため（現在、画面が点滅します-別のHTMLファイルがロードされているため）。

私は、これらすべての50 divで現在行っているのと同じアプローチで進むことができることを理解していますが、コードが多くなり、理解するのが難しくなります。記事/スライド間の遷移のために、ある種のステートマシンを作成することを考えています。

function changeSlide(bool forward)
{
    disableAnimationForAllSlides();

    var articleNumber = getArticle();
    var currentSlideNumber = getCurrentSlide();

    if (currentSlideNumber == 1 && forward == false)
    {
        goToArticleList();
        return;
    } else if (currentSlideNumber == 10 && forward == true)
    {
        goToArticleList();
        return;
    }
    else
    {
        hideAllSlides();
        displaySlide(articleNumber, currentSlideNumber + 1);
        enableAnimationForSlide(articleNumber, currentSlideNumber + 1);
    }
}

function changeArticle(newArticleNumber)
{
    disableAnimationForAllSlides();
    hideAllSlides();

    displaySlide(newArticleNumber, 1);
    enableAnimationForSlide(newArticleNumber, 1);
}

そして、それはすべて比較的簡単だと思いますが、車輪の再発明はしたくありません...そしてもちろん、私の場合はこの例よりもかなり複雑です。だから私の質問は：

  1. このタスクの標準的なアプローチは何ですか？1つのHTMLファイルに複数のスライドがあり、それらの間にトランジションがありますか？たとえば、next / prev要素をどのように定義する必要がありますか？
  2. これに使用できるライブラリ/フレームワークはありますか？
  3. 私が見ることができるインターネットの例はありますか？

HTML5 / CSS3/jQueryプロジェクトです。

ありがとうございました。

4

2 に答える 2

2

あなたはDeck.jsをチェックしたいかもしれません

これは、HTML5とJavaScriptを使用して構築されたかなりフル機能のスライドデッキです。

于 2012-06-23T14:44:45.967 に答える
1

これが素敵な例です。これはHTML5Webサイトであり、スライドデッキとして構築され、HTML5の新しくて光沢のあるものをたくさん表示しています。スライド間のトランジション、矢印キーのサポート、さらにはさまざまなスタイル（Tキーを押してテーマを切り替える）を備えています。

于 2012-06-23T15:09:31.613 に答える