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.
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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句