如何使用javascript自动切换已创建的网站网页？

Sandy 发表于 Dev

沙

我想创建一个几乎没有用户输入的演示文稿的网站。用户必须访问我的网站，他才能看到图像滑动，并且在固定的时间间隔后页面必须自动更改。我想知道如何定期使用javascript切换网站页面。

马克·范格里布

这是一种在一页中完成此操作的方法。本质上，每隔TIME_PER_PAGE间隔，您将“页面” div切换出，并在下一页切换。内联样式表可确保仅当前页面可见，并且它占据了屏幕的整个大小。

    <html>
    <head>
        <style>
            body, html { 
                height: 100%; 
                overflow: hidden; 
                padding: 0; 
                margin: 0; 
            }

            .page {
              top: 0; 
              left: 0; 
              width: 100%; 
              min-height: 100%; 
              position: absolute; 
              display: none; 
              overflow: hidden;
              border: 0;
            }

            .currentPage { 
              display: block; 
            }
        </style>
    </head>
    <body>
        <script>
            var TIME_PER_PAGE = 2000;
            window.onload = function() {
                var pages = document.querySelectorAll('.page'),
                    numPages = pages ? pages.length : 0;
                    i = -1;

                function nextPage() {
                    if (i >= 0)
                        pages[i].classList.remove('currentPage');

                    i++;
                    pages[i].classList.add('currentPage');
                    if (i < numPages - 1)
                      setTimeout(nextPage, TIME_PER_PAGE);
                }

                nextPage();
            }
        </script>

        <div class="page">Page 1 Content</div>
        <div class="page">Page 2 Content</div>
        <div class="page">Page 3 Content</div>
        <div class="page">Page 4 Content</div>
        <div class="page">Page 5 Content</div>
    </body>
    </html>