创建一个带有下一个/上一个链接的全屏div

如何使用下一个/上一个链接创建全屏div？单击下一个链接将滚动到下一页，单击上一个连接将滚动到上一页。请参阅下面的代码：

$(document).ready(function() {
$(".next").click(function(event) {
var y = $(window).scrollTop();
$("html, body").stop().animate({
scrollTop: y + $(window).height()
}, 800);
});
});

body,
html {
height: 100%;
margin: 0px;
}
#app {
background-color: #dcdcdc;
height: 100%;
width: auto;
}
#pages {
height: 100%;
width: auto;
}
.page {
height: 100%;
width: auto;
}
/*************************************************************************************************/
/* Prev & next button styling                                                                    */
/*************************************************************************************************/
p {
font-size: 0;
/* Fixes inline block spacing */
}
span {
/*border: 1px solid #fff;*/
width: 50%;
display: inline-block;
}
span.align-left {
left: 0%;
text-align: left;
}
span.align-right {
right: 0%;
text-align: right;
}
span.align-left,
span.align-right {
top: 50%;
position: fixed;
}
span a {
font-size: 16px;
}
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
color: black;
}
.prev {
background-color: #f1f1f1;
color: black;
}
.next {
background-color: #ed6e0f;
color: white;
}
.round {
border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Website - Home</title>
</head>
<body>
<div id="app">
<div id="pages">
<p>
<span class="align-left">
						<a href="#" class="prev round">&#8249;</a>
					</span>
<span class="align-right">
						<a href="#" class="next round">&#8250;</a>
					</span>
</p>
<div class="page">
Our&nbsp;Services
</div>
<div class="page">
Menu&nbsp;Examples
</div>
<div class="page">
Book&nbsp;Your&nbsp;Chef
</div>
<div class="page">
Contact&nbsp;Us
</div>
<div class="page">
Live&nbsp;Feed
</div>
</div>
</div>
</body>
</html>

最好我只希望带有.page类的第一个div是活动的和可见的，直到我单击下一个链接，该链接将隐藏当前div，并将带有class.page的下一个div滚动到视图中。

干杯，

Tim

我创建了非常简单的函数来实现您想要的功能。我试着从你的代码开始，这样你(我希望(更容易理解发生了什么。

我创建了一个循环(当你到达页面末尾并点击"下一个按钮"时，你从第一个页面开始(，我添加了两个功能，在浏览器窗口的顶部设置你调整页面大小时点击的最后一个页面(如果你不在乎这个员工，你可以删除它们(。

所以这是我的代码，尽情享受吧！(

$(document).ready(function() {
var myPage=1;
var totPages=$(".page").length;
scroll(myPage); /* This put the page 1 on the top of the window when you visit for the first time the web page.*/
$(".next, .prev").click(function(event) {
event.preventDefault();
if($(this).hasClass("next")){
myPage = (myPage==totPages) ? 1 : myPage+1;
} else{
myPage = (myPage==1) ? totPages : myPage-1; 
} 
scroll(myPage);
});
function scroll(nextPage){
$('html, body').animate({
scrollTop: $("div[data-id='"+nextPage+"']").offset().top
}, 800);
}
/* These 2 functions put the last page you clicked on the top when you resize
browser window. You can remove them if you do not care this stuff*/
var resize;
$(window).resize(function() {
clearTimeout(resize);
resize = setTimeout(resizeStuff, 200);
});

function resizeStuff() {
scroll(myPage);
}
});

body,
html,
#pages,
#app,
.page {
height: 100vh;
margin: 0px;
}
#app {
background-color: #dcdcdc;
}

/*************************************************************************************************/
/* Prev & next button styling                                                                    */
/*************************************************************************************************/
p {
font-size: 0;
/* Fixes inline block spacing */
}
span {
/*border: 1px solid #fff;*/
width: 50%;
display: inline-block;
}
span.align-left {
left: 0%;
text-align: left;
}
span.align-right {
right: 0%;
text-align: right;
}
span.align-left,
span.align-right {
top: 50%;
position: fixed;
}
span a {
font-size: 16px;
}
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
color: black;
}
.prev {
background-color: #f1f1f1;
color: black;
}
.next {
background-color: #ed6e0f;
color: white;
}
.round {
border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<div id="pages">
<p>
<span class="align-left">
<a href="#" class="prev round">&#8249;</a>
</span>
<span class="align-right">
<a href="#" class="next round">&#8250;</a>
</span>
</p>
<div class="page" data-id="1" style="background-color:#ff0000;">
Our&nbsp;Services
</div>
<div class="page" data-id="2" style="background-color:#00ff00;">
Menu&nbsp;Examples
</div>
<div class="page" data-id="3" style="background-color:#0000ff;">
Book&nbsp;Your&nbsp;Chef
</div>
<div class="page" data-id="4" style="background-color:#ffff00;">
Contact&nbsp;Us
</div>
<div class="page" data-id="5" style="background-color:#123456;">
Live&nbsp;Feed
</div>
</div>
</div>

此外，我将指出这个漂亮、非常完整的jquery插件，它可以帮助您开发您想要的东西：https://github.com/alvarotrigo/fullPage.js

干杯；(

相关内容

最新更新

热门标签：