<分区>
我想创建一个看起来像没有用户输入的演示文稿的网站。用户必须访问我的网站，他将能够看到滑动的图像，并且在固定的时间间隔后页面必须自动更改。 我想知道如何使用 javascript 定期切换我网站的页面。
标签 javascript html css
<分区>
我想创建一个看起来像没有用户输入的演示文稿的网站。用户必须访问我的网站，他将能够看到滑动的图像，并且在固定的时间间隔后页面必须自动更改。 我想知道如何使用 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>
关于javascript - 如何使用 javascript 自动切换我创建的网站网页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18933196/