Создаём слайдер страниц

Опубликовано: 10 Октябрь 2010Автор ratemir

Создаём слайдер страницРаздвижная анимация в последнее время стала довольно таки популярным интерактивным способом показать содержание страниц. Обычные слайдеры изображений или текста как правило используются на отведенном участке страницы сайта или блога. В нашем же случае стандартная раздвижная галерея поднимается на следующий уровень. А именно на уровень анимации всей страницы. Вы можете посмотреть пример слайдера здесь. Но его, если хотите, также можно применить локально на любом участке обычной страницы.

Давайте создадим аналогичный эффект, используя JQuery. Начнем с создания стандартной HTML разметки.

<div id="full-slider-wrapper">
    <div id="full-slider">
 
        <div class="slide-panel active">
        Panel 1 content here
        </div>
 
        <div class="slide-panel">
        Panel 2 content here
        </div>
 
        <div class="slide-panel">
        Panel 3 content here
        </div>
    </div>
</div>

Мы создали основные идентификаторы(id) и классификаторы(class) стилей, которые будут использованы в таблицах CSS. Теперь, давайте добавим некоторые основные стили CSS для обработки положения будущих панелей:

html {
      min-width: 800px;
}
 
#full-slider-wrapper {
      overflow: hidden;
}
 
#full-slider {
      position: relative;
      width: 800px;
      height: 600px;
      margin: 0 auto;
}
 
#full-slider .slide-panel {
     position: absolute;
     top: 0;
     left: 0;
     width: 800px;
     height: 600px;
     visibility: hidden;
}
 
#full-slider .slide-panel.active {
     visibility: visible;
}

Мы указали абсолютное позиционирование(position: absolute;) и прописали произвольные размеры для панелей(.slide-panel) и их огранки(#full-slider). Вы также можете настроить эти размеры по нуждам вашего сайта.

Ещё мы придали значение overflow: hidden; для элемента оболочки #full-slider-wrapper Это предотвратит появление полос прокрутки, когда мы включим анимацию(слайдер) панелей. Так как был использован атрибут overflow: hidden; то нам теперь нужно назначить min-width в html документе. Таким образом предотвращается появление полос прокрутки, если окно браузера меньше чем надо. И наконец мы применили класс .active чтобы при загрузке страницы показывалась именно главная панель.

Итак, самое интересное. Осталось связать выше упомянутое, с JQuery. Мы начнем с указания некоторых переменных, а затем создаем функцию для обработки скользящей анимации в обеих направлениях:

$(function() {
var $slider = $('#full-slider');
var $sliderPanels = $slider.children('.slide-panel');
 
function slidePanel( newPanel, direction ) {
// define the offset of the slider obj, vis a vis the document
var offsetLeft = $slider.offset().left;
 
// offset required to hide the content off to the left / right
var hideLeft = -1 * ( offsetLeft + $slider.width() );
var hideRight = $(window).width() - offsetLeft;
 
// change the current / next positions based on the direction of the animation
if ( direction == 'left' ) {
currPos = hideLeft;
nextPos = hideRight;
}
else {
currPos = hideRight;
nextPos = hideLeft;
}
 
// slide out the current panel, then remove the active class
$slider.children('.slide-panel.active').animate({
left: currPos
}, 500, function() {
$(this).removeClass('active');
});
 
// slide in the next panel after adding the active class
$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({
left: 0
}, 500 );
}
});

Функция slidePanel () принимает два аргумента: индексная панель, которую мы хотим видеть в поле зрения, и направления слайда (т.е. направо или налево). Хотя эта функция выглядит сложной, в то же время понятия довольно просты.

Мы определили количество смещений необходимых, чтобы скрыть панели по левую и правую стороны. Для вычисления этих значений мы использовали функцию JQuery offset (), ширину слайдера($slider.width ()) и ширину окна($(window).width ()).

С помощью animate () мы включаем анимацию JQuery.

Затем мы устанавливаем левое положение новой панели на экране, то есть стрелка «налево» станет активна. Данная штука зависит от класса active.

Наша функция теперь обрабатывает анимацию, но у нас еще нет элементов навигации, чтобы использовать ее. Добавляем навигацию(стрелки вправо и влево), которую мы определили ранее:

var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider );
var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap );
var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );
 
var currPanel = 0;
 
$navLeft.click(function() {
currPanel--;
 
// check if the new panel value is too small
if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;
 
slidePanel(currPanel, 'right');
});
 
$navRight.click(function() {
currPanel++;
 
// check if the new panel value is too big
if ( currPanel >= $sliderPanels.length ) currPanel = 0;
 
slidePanel(currPanel, 'left');
});

Мы могли бы включить эту навигацию в основной разметке HTML, но мы добавили её с JavaScript по причине того что это гарантирует нам не появление навигации, пока JavaScript не загрузится полностью.

Давайте придадим немного дизайна навигации:

#full-slider-nav {
   position: absolute;
   top: 0;
   right: 0;
}
 
#full-slider-nav-left, #full-slider-nav-right {
   display: inline-block;
   height: 0;
   width: 0;
   margin-left: 15px;
   border: 20px solid transparent;
   cursor: pointer;
}
 
#full-slider-nav-left {
   border-right-color: #BBB;
}
 
#full-slider-nav-left:hover {
   border-right-color: #999;
}
 
#full-slider-nav-right {
   border-left-color: #BBB;
}
 
#full-slider-nav-right:hover {
   border-left-color: #999;
}

Здесь мы установили навигацию в правом верхнем углу. Мы использовали свойства CSS для создания треугольника.

Вот полный код JQuery который у нас получился:

$(function() {
function slidePanel( newPanel, direction ) {
// define the offset of the slider obj, vis a vis the document
var offsetLeft = $slider.offset().left;
 
// offset required to hide the content off to the left / right
var hideLeft = -1 * ( offsetLeft + $slider.width() );
var hideRight = $(window).width() - offsetLeft;
 
// change the current / next positions based on the direction of the animation
if ( direction == 'left' ) {
currPos = hideLeft;
nextPos = hideRight;
}
else {
currPos = hideRight;
nextPos = hideLeft;
}
 
// slide out the current panel, then remove the active class
$slider.children('.slide-panel.active').animate({
left: currPos
}, 500, function() {
$(this).removeClass('active');
});
 
// slide in the next panel after adding the active class
$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({
left: 0
}, 500 );
}
 
var $slider = $('#full-slider');
var $sliderPanels = $slider.children('.slide-panel');
 
var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider );
var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap );
var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );
 
var currPanel = 0;
 
$navLeft.click(function() {
currPanel--;
 
// check if the new panel value is too small
if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;
 
slidePanel(currPanel, 'right');
});
 
$navRight.click(function() {
currPanel++;
 
// check if the new panel value is too big
if ( currPanel >= $sliderPanels.length ) currPanel = 0;
 
slidePanel(currPanel, 'left');
});
});

И последнее, кроме выше указанного скрипта, нам ещё понадобится библиотека jQuery, которую можно подгружать с гугла <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> или скачать там же, положить к себе на сервер и подгружать уже с своего хостинга.

Метки: Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

4 комментариев к “Создаём слайдер страниц”

  • Михаил
    14 Июнь, 2011, 14:48

    Как сделать так, чтобы слайды перелистывались автоматически? Спасибо.

  • 16 Июнь, 2011, 13:11

    Михаил, Используйте функцию window.setInterval (function, delay)

    function — функция созданная Вами или уже существующая, которая включается через определённый промежуток времени delay. Например:

    function slideRight() {
            currPanel++;
            if ( currPanel >= $sliderPanels.length ) currPanel = 0;
            slidePanel(currPanel, 'left');
        }
    	// Задействуем эту самую функцию
    	window.setInterval(slideRight, 4000);
  • Михаил
    23 Июнь, 2011, 14:50

    А как сделать, чтобы сразу при входе на страницу слайды начинали перелистываться. Сейчас все начинает работать только после того, как нажмешь на стрелку.

  • 24 Июнь, 2011, 12:00

    Михаил, Как ни странно, но у меня всё работает, может в другом проблема.

Оставить комментарий

Наверх