下面的代码通过滑动 DIV 的内容来工作，但我想要的是，如果用户位于第一页并单击链接，它将把他完整地滑动到第二页，反之亦然。 任何帮助将不胜感激。谢谢
页面幻灯片
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>I am on the First Page</h1>
<a href="secondpage.html" class="Left">Slide Me to Secondpage</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>I am on the second page</h1>
<a href="firstpage.html" class="Left">Slide Me back to First Page</a>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
你要做的是，当用户想要转到第 2 页时，你进行 Ajax 调用来渲染第 2 页，并将其放入屏幕外的 div 中，然后滑动，删除上一页(或者保留它，以防他们离开)返回)并在右侧添加一个新的 div。唯一的缺点是，由于您没有创建回发，您可能必须维护自己的历史记录并拦截后退按钮。
关于javascript - Html5页面滑动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26918212/