1

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

4

3 回答 3

3

这是一种在一个页面中执行此操作的方法。本质上，每个 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 回答
0

尝试这样的事情也许 - 其中 2000 是 2 秒（2000 毫秒）。

setTimeout(function(){document.location='http://google.com.au';}, 2000);

http://www.w3schools.com/jsref/met_win_settimeout.asp

于 2013-09-21T13:35:47.100 回答
0

setInterval would be nice. For example:

var interval = setInterval(switchPage, 2000)
function switchPage(){
    //with use of Jquery
    var active = $('.page.active'), next = active.next();
    if(next.length !== 0){
        active.fadeOut();
        next.fadeIn(function(){
            active.removeClass('active');
            next.addClass('active');
        });
    }
}
于 2013-09-21T13:43:12.663 回答