Слайдер страницы на сайте

LIVE DEMO

Это ужасно просто, допустим, у вас есть нижняя навигация и #pages DIV которые будут иметь в качестве первых детей желаемые страницы DIV:

<div id="pages">  
  <div id="home">HOME PAGE</div>
  <div id="about">ABOUT PAGE</div>
  <div id="products">PRODUCTS PAGE</div>
  <div id="contact">CONTACT</div> 
</div>

<table id="nav">
  <tr>
    <td><a href="#home">HOME</a></td>
    <td><a href="#about">ABOUT</a></td>
    <td><a href="#products">PRODUCTS</a></td>
    <td><a href="#contact">CONTACT</a></td>
  </tr>
</table>

все, что вам нужно, это установить position:fixed #nav внизу и установить absolute width и height 100% на ваших страницах:

#pages > div{
  position:absolute;
  width:100%;
  height:100%;
}
#pages div + div{ // To keep "HOME page" at 0 but push away all other pages
    left:-100%; /* note this */
}

// Style buttons and pages
#home,    a[href="#home"]    {background:#078;}
#about,   a[href="#about"]   {background:#780;}
#products,a[href="#products"]{background:#807;}
#contact, a[href="#contact"] {background:#088;}

#nav{
  position:fixed;
  bottom:0;
  width:100%;
  table-layout:fixed;
}
#nav a{
  display:block;
}

все, что вам нужно, это крошечный бит jQuery:

jQuery(function($){

    function showPage( pageID ){
      var pID = pageID || window.location.hash;
      $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
      $(pID).stop().animate({left:0}, 600);
    }
    showPage();

    $('#nav a').click(function(){
      showPage( $(this).attr('href') );
    });

});

Обратите внимание на то, что навигационные привязки имеют то же самое имя привязки, что и относительный ID страниц. Теперь, чтобы объяснить:

$('#nav a').click(function(){

по умолчанию #pagename хеш #pagename в строке URL, теперь нам нужна только функция, которая будет считывать идентификатор целевой страницы с помощью переданного аргумента pageID OR (||), если не было аргументов, прочитайте window.location.hash с адресной панели.

Таким образом, вы убедитесь, что если я cpoy вставьте ссылку страницы другу, например:

http://www.example.com/#contact

showPage(); триггер функции приведет его к желаемой странице.

Внутри функции мы всегда держим домашнюю страницу в 0 левых пикселях, просто нацеливая все остальные страницы с помощью селектора jQuery :gt() (больше индекса):

$('#pages > div:gt(0)').animate({left: '-100%'}, 600); // speaks by itself

чем мы просто нацеливаем на нужный ID страницы, и мы анимируем его на месте.

• Мы передали атрибут href привязанного href,
• У загруженной страницы уже был hash в адресной строке.

---

С jQuery другой способ сделать это будет также просто

$('#nav a').click(showPage);

но, чем внутри нашей функции, мы должны ждать изменения HASH, прежде чем мы сможем применить любую анимацию. С этой целью setTimeout would be fine:

function showPage(){
  setTimeout(function(){
    $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
    $(window.location.hash).stop().animate({left:0}, 600);
  },100);
}
showPage();