how can i switch web pages of the website automatically , which i have created, using javascript?

Question

I want to create website which will mostly look like a presentation with no user input.The user must vist to my site and he will be able to see images sliding and after regular interval of time the page must change automatically. I want to know how can i switch pages of my website using javascript at regular interval of time.

Have you looked into the `setTimeout()` function and/or [`window.location`](https://developer.mozilla.org/en-US/docs/Web/API/window.location#Example_.231.3A_Navigate_to_a_new_page) yet? If not, [what else have you tried?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) — nnnnnn, Sep 21 '13 at 13:33
Yea i wouldn't stay on a site long if it kept jumping pages just to change an image lol. check out some image sliders and stuff with jquery. — FaddishWorm, Sep 21 '13 at 13:44
I don't think "switch pages automatically" is good. You should "switch images automatically" instead — Vitim.us, Sep 21 '13 at 17:18

score 3 · Accepted Answer · answered Sep 21 '13 at 13:51

Here's a way to do it in one page. Essentially, every TIME_PER_PAGE interval, you switch the "page" div out, and sub in the next page. The inline stylesheet ensures that only the current page is visible and that it takes up the full size of the screen.

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

+1 nice answer, this is the way to go. This should be a jsfiddle. — Vitim.us, Sep 21 '13 at 17:21
replace i++ with i = (i + 1) % numPages; Get rid of "if (i < numPages - 1)" to make sure setTimeout executes every time. — Mark Vayngrib, Nov 01 '14 at 22:01
In addition to this I was also helped by the following post to get my formatting right. https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100 — W_O_L_F, Oct 05 '18 at 06:56

FaddishWorm · Answer 2 · 2013-09-21T13:42:56.773

0

Try something like this maybe - where 2000 is 2 seconds (2000 milliseconds).

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

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

edited Sep 21 '13 at 13:42

answered Sep 21 '13 at 13:35

FaddishWorm

5,278
9
32
41

1

Where by "something like this" you mean `setTimeout(function() { document.location='http://google.com.au';}, 2000);`? (The code you've shown will set the location immediately, it won't wait two seconds.) – nnnnnn Sep 21 '13 at 13:42
you are right, thanks :) – FaddishWorm Sep 21 '13 at 13:43

score 0 · Answer 3 · answered Sep 21 '13 at 13:43

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

how can i switch web pages of the website automatically , which i have created, using javascript?

3 Answers3