Question

我正在为平板电脑开发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);
}

我认为这一切都相对简单 - 但我不想重新发明轮子......当然，我的情况比这个例子复杂得多。 所以我的问题是：

此任务的标准方法是什么 - 在一个HTML文件中有多个幻灯片，它们之间有过渡？我应该如何定义next / prev元素等等？
我可以使用任何库/框架吗？
互联网上有什么例子我可以看一下吗？

它是HTML5 / CSS3 / jQuery项目。

谢谢。

Answer 1

您可以查看Deck.js

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

Answer 2

Here's a lovely example。它是一个HTML5网站，作为幻灯片构建，展示了HTML5的许多新的和闪亮的东西。它具有幻灯片之间的过渡，支持箭头键甚至不同的样式（按T切换主题）。

jQuery - 如何使用多个幻灯片制作单个html页面 - 一次只能看到一个

2 个答案: