可以使用手势库 (gesture library) 来实现这种效果。在 HTML5 中,有许多现成的库可以使用,如 Hammer.js 和 swipe.js。
在使用这些库时,首先需要在页面上绑定手势事件。比如,使用 Hammer.js 时可以这样绑定:
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.on("swipeleft swiperight", function(ev) {
// Code to handle swipe event
});
然后,在事件处理函数中,根据左右滑动来判断是展示上一页还是下一页。并且可以使用CSS3动画来实现左右倾斜的动画效果。
最后还需要在判断第一页和最后一页的情况,可以在事件处理函数中进行相应的判断来禁用滑动操作。
var currentPage = 1;
var totalPages = 5;
mc.on("swipeleft", function(ev) {
if (currentPage < totalPages) {
currentPage++;
// animate to next page
}
});
mc.on("swiperight", function(ev) {
if (currentPage > 1) {
currentPage--;
// animate to previous page
}
});
这样就可以实现滑动切换页面的效果了。