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

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

javascript html css

如何使用javascript自动切换我创建的网站的网页？,javascript,html,css,Javascript,Html,Css,我想创建一个网站，这将大部分看起来像一个没有用户输入演示文稿。用户必须访问我的网站，他将能够看到图像滑动和定期间隔后，页面必须自动更改。我想知道如何在固定的时间间隔内使用javascript切换我的网站页面。试试类似的方法——其中2000是2秒（2000毫秒） setInterval会很好。例如： var interval = setInterval(switchPage, 2000) function switchPage(){ //with use of Jquery v

我想创建一个网站，这将大部分看起来像一个没有用户输入演示文稿。用户必须访问我的网站，他将能够看到图像滑动和定期间隔后，页面必须自动更改。

我想知道如何在固定的时间间隔内使用javascript切换我的网站页面。

试试类似的方法——其中2000是2秒（2000毫秒）

setInterval

会很好。例如：

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');
        });
    }
}

这里有一种方法可以在一页中完成。基本上，每次每一页间隔，您都会将“PAGE”div调出，并在下一页中进行sub。内联样式表确保只有当前页面可见，并且占据整个屏幕

    <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>


正文，html{
身高：100%；
溢出：隐藏；
填充：0；
保证金：0；
}
.第页{
排名：0；
左：0；
宽度：100%；
最小高度：100%；
位置：绝对位置；
显示：无；
溢出：隐藏；
边界：0；
}
.currentPage{
显示：块；
}
每页var时间=2000；
window.onload=函数（）{
var pages=document.querySelectorAll（“.page”），
numPages=页数？页数。长度：0；
i=-1；
函数下一页（）{
如果（i>=0）
pages[i].classList.remove（'currentPage'）；
i++；
pages[i].classList.add（'currentPage'）；
如果（i

您是否查看了

setTimeout（）

函数和/或？如果不是的话，我不会在一个网站上停留太久，如果它只是为了改变一个图像而跳转页面。看看一些图像滑块和jquery的东西。我不认为“自动切换页面”是好的。您应该“自动切换图像”，而不是“像这样的东西”，您的意思是

setTimeout（function（）{document.location=）http://google.com.au';}, 2000);？（您显示的代码将立即设置位置，不会等待两秒钟。）您是对的，谢谢：）+1回答不错，这是正确的方法。这应该是一个JSFIDLE。如何让它再次循环？用i=（i+1）%numPages替换i++；去掉“if（i    <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>