我想创建一个几乎没有用户输入的演示文稿的网站。用户必须访问我的网站,他才能看到图像滑动,并且在固定的时间间隔后页面必须自动更改。我想知道如何定期使用javascript切换网站页面。
这是一种在一页中完成此操作的方法。本质上,每隔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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句