ユーザー入力のないプレゼンテーションのように見える Web サイトを作成したいと考えています。javascript を使用して定期的に Web サイトのページを切り替える方法を知りたいです。
9924 次
3 に答える
3
これを 1 ページで行う方法を次に示します。基本的に、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>
于 2013-09-21T13:51:30.553 に答える