如果在这里，我们可以编写代码并构建一个具有左右滑动页面的网站，那就太好了。
但首先，让我解释一下这个概念。众所周知，一个网站由许多页面组成。为了将页面导航到页面，我们将用户重定向到正确的 url 并加载新页面。我想要做的是避免这个加载时间，加载所有页面，显示用户想要查看的页面并隐藏其他页面。
但是为什么我要加载所有页面？？？我想通过显示页面（活动页面 80% 宽度/屏幕中心）、右侧下一页的开头（下一页 10% 宽度/右侧）来创建最佳网站之一, 上一页的结束（上一页 10% 宽度/左）。
你明白了吗？好=）
我所做的： - 构建一个索引页面，我们正在加载所有不同的页面（目前是 5 个） - 将类添加到所有这些页面以检索 id 并使用它 - 添加我的 js 函数和滑动代码效果
这是我的js函数。没有动画，一切都像这样工作：
/* 让进程先工作--------------------------------*/
// When we are clicking on any element of the parent #navigation (the div)
// We are running this function
// We are focusing this tag to get a list of all the pages
$('li.menu-item').live('click', function(event){
/* GET THE PAGE ID OF THE CLICKING ELEMENT
-----------------------------*/
var page_id_target = event.target.id;
console.log("page id: "+page_id_target);
// this <> li.menu-item
var all_pages_menu = $('li.menu-item');
console.log(all_pages_menu);
var pages_numbers = all_pages_menu.length;
console.log("Sum of pages: "+pages_numbers);
//get the list of li menu
console.log("target class of the focus element: "+all_pages_menu[page_id_target-1].className);
//get the list of div
console.log($('#content .page'));
// Desactive all li class
$('.page, .menu-item').removeClass('active').removeClass('next').removeClass('previous');
$('.page').addClass('hidden');
//Define the number id of the next page and the previous
var next = parseInt(page_id_target)+1;
var previous = parseInt(page_id_target)-1;
// console.log("page_id_target: "+page_id_target);
// console.log("next: "+next);
// console.log("previous: "+previous);
if (page_id_target==1)
{
//Update Menu
$('ul#navigation #'+page_id_target).addClass('active');
$('ul#navigation #'+next).addClass('next');
$('ul#navigation #'+pages_numbers).addClass('previous');
//Update DOM
$('#content .'+page_id_target).addClass('active').removeClass('hidden');
$('#content .'+next).addClass('next').removeClass('hidden');
$('#content .'+pages_numbers).addClass('previous').removeClass('hidden');
}
else if (page_id_target==pages_numbers)
{
//Update Menu
$('ul#navigation #'+page_id_target).addClass('active');
$('ul#navigation #'+1).addClass('next');
$('ul#navigation #'+previous).addClass('previous');
//Update DOM
$('#content .'+page_id_target).addClass('active').removeClass('hidden');
$('#content .'+1).addClass('next').removeClass('hidden');
$('#content .'+previous).addClass('previous').removeClass('hidden');
}
else
{
//Update Menu
$('ul#navigation #'+page_id_target).addClass('active');
$('ul#navigation #'+next).addClass('next');
$('ul#navigation #'+previous).addClass('previous');
//Update DOM
$('#content .'+page_id_target).addClass('active').removeClass('hidden');
$('#content .'+next).addClass('next').removeClass('hidden');
$('#content .'+previous).addClass('previous').removeClass('hidden');
}
但是当我试图在我的函数中添加一些动画时，例如：
else
{
//Update Menu
$('ul#navigation #'+page_id_target_right).addClass('active');
$('ul#navigation #'+next_right).addClass('next');
$('ul#navigation #'+previous_right).addClass('previous');
/*
// Update DOM
// Work without Animations
$('#content .'+page_id_target_right).addClass('active').removeClass('hidden');
$('#content .'+next_right).addClass('next').removeClass('hidden');
$('#content .'+previous_right).addClass('previous').removeClass('hidden');
*/
// Retrieve the id of the previous old page
previous_right_old = previous_right-1;
console.log("previous_right_old: "+previous_right_old);
/*
$('#content .'+page_id_target_right).addClass('hidden');
$('#content .'+next_right).addClass('hidden');
$('#content .'+previous_right).addClass('hidden');
$('#content .'+previous_right_old).removeClass('hidden');
*/
// This is the old previous page
// Set up the page on the left and the background (this is for initialise it, Otherwise the first the background won't follow)
// Add the animate action to the left
// The size of one page is 78%
// Adding the hiding class to let the page on the left (-151%)
$('#content .'+previous_right_old).css({ 'left' : '-73%','background-color' : '#EAEAEA'}).animate({'left' : '-151%'}, duration, easing, function(){$('#content .'+previous_right_old).addClass('hidden')});
// This is the previous page
// Active to previous
// Animate it
$('#content .'+previous_right).animate({'left' : '-73%', 'margin-right' : '0%', 'margin-left' : '0%', 'backgroundColor' : '#EFF0F1' }, duration, easing, function(){$('#content .'+previous_right).removeClass('hidden').addClass('previous')});
// Add the left/right margin to respect the active class and attribute good classes after
$('#content .'+page_id_target_right).animate({'left' : '5%', 'margin-right' : '6%', 'margin-left' : '6%', 'backgroundColor' : '#FFFFFF' }, duration, easing, function(){$('#content .'+page_id_target_right).addClass('active').removeClass('hidden')});
// load the next page on the right of the screen
// Adding the next class so the page will be correctly displaying
// Set up the page on the right
// Animate it to the left with a page with of 78%
$('#content .'+next_right).addClass('next').appendTo('#content').css({ 'left' : '173%', 'backgroundColor' : '#EFF0F1'}).animate({'left' : '95%'}, duration);
//animate previous to next
//$('#content .previous').css({ 'left' : '-73%'}).animate({'left' : '-151%'}, duration, easing, function(){$(this).remove();})
//.clone().addClass('next').removeClass('previous').appendTo('#content').css({ 'left' : '173%'}).animate({'left' : '95%'}, duration);
}
我确实有一些错误要修复，但我真的不知道我的错误在哪里......
因此，如果有任何优秀的开发人员愿意与我一起开发这个很棒的模板，那就太好了。感谢阅读，不要问我更多代码。干杯