1

ユーザー入力のないプレゼンテーションのように見える Web サイトを作成したいと考えています。javascript を使用して定期的に Web サイトのページを切り替える方法を知りたいです。

4

3 に答える 3

3

これを 1 ページで行う方法を次に示します。基本的に、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>
于 2013-09-21T13:51:30.553 に答える