1

我正在为平板电脑开发 HTML5 应用程序。思路如下：app由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. 这项任务的标准方法是什么 - 在一个 HTML 文件中包含多个幻灯片，并在它们之间进行转换？例如，我应该如何定义下一个/上一个元素等？
  2. 有没有我可以使用的库/框架？
  3. 互联网上有没有我可以看的例子？

它是 HTML5/CSS3/jQuery 项目。

谢谢你。

4

2 回答 2

2

你可能想看看Deck.js

这是一个使用 HTML5 和 JavaScript 构建的功能齐全的幻灯片。

于 2012-06-23T14:44:45.967 回答
1

这是一个可爱的例子。这是一个 HTML5 网站，构建为幻灯片，展示了许多新的和闪亮的 HTML5 内容。它具有幻灯片之间的过渡，支持箭头键甚至不同的样式（按 T 切换主题）。

于 2012-06-23T15:09:31.613 回答