К простому слайдеру, созданному ранее, нужно добавить кнопки "вперед" и "назад".
Для этого нужно дополнить написанный ранее код.
Вся структура слайдера останется прежней. К разметке добавятся два контейнера, которые будут выполнять функцию кнопок.
<div class="slider-box"> <div class="slider"> <img src="images/slide01.jpg" alt=""> <img src="images/slide02.jpg" alt=""> <img src="images/slide03.jpg" alt=""> <img src="images/slide04.jpg" alt=""> <img src="images/slide05.jpg" alt=""> </div> <div class="prev"></div> <div class="next"></div> </div>
Кнопки займут свое место благодаря абсолютному позиционированию относительно контейнера .slider-box
.slider-box{ position:relative; width:320px; height:210px; overflow:hidden; } .slider{ position:relative; width:10000px; height:210px; } .slider img{ float:left; } .slider-box .prev, .slider-box .next{ position:absolute; top:100px; display:block; width:29px; height:29px; cursor:pointer; } .slider-box .prev{ left:10px; background:url(../images/slider_controls.png) no-repeat 0 0; } .slider-box .next{ right:10px; background:url(../images/slider_controls.png) no-repeat -29px 0; }
Слайдер прокручивается автоматически. По умолчанию движение идет слева направо, но при необходимости можно изменить направление его движения при помощи переменной course. При изменении значения переменной с 1 на -1, произойдет изменение направления движения слайдера.
Изображения в слайдере не должны меняться когда курсор находится в пределах слайдера. Для чего это делается? Все просто. Если курсор мыши расположен на слайдере, значит, посетитель сайта заинтересовался его содержимым. В это время не стоит менять слайды автоматически.
$(function() { var slider = $('.slider'), sliderContent = slider.html(), // Содержимое слайдера slideWidth = $('.slider-box').outerWidth(), // Ширина слайдера slideCount = $('.slider img').length, // Количество слайдов prev = $('.slider-box .prev'), // Кнопка "назад" next = $('.slider-box .next'), // Кнопка "вперед" sliderInterval = 3300, // Интервал смены слайдов animateTime = 1000, // Время смены слайдов course = 1, // Направление движения слайдера (1 или -1) margin = - slideWidth; // Первоначальное смещение слайдов $('.slider img:last').clone().prependTo('.slider'); // Копия последнего слайда помещается в начало. $('.slider img').eq(1).clone().appendTo('.slider'); // Копия первого слайда помещается в конец. $('.slider').css('margin-left', -slideWidth); // Контейнер .slider сдвигается влево на ширину одного слайда. function nextSlide(){ // Запускается функция animation(), выполняющая смену слайдов. interval = window.setInterval(animate, sliderInterval); } function animate(){ if (margin==-slideCount*slideWidth-slideWidth){ // Если слайдер дошел до конца slider.css({'marginLeft':-slideWidth}); // то блок .slider возвращается в начальное положение margin=-slideWidth*2; }else if(margin==0 && course==-1){ // Если слайдер находится в начале и нажата кнопка "назад" slider.css({'marginLeft':-slideWidth*slideCount});// то блок .slider перемещается в конечное положение margin=-slideWidth*slideCount+slideWidth; }else{ // Если условия выше не сработали, margin = margin - slideWidth*(course); // значение margin устанавливается для показа следующего слайда } slider.animate({'marginLeft':margin},animateTime); // Блок .slider смещается влево на 1 слайд. } function sliderStop(){ // Функция преостанавливающая работу слайдера window.clearInterval(interval); } prev.click(function() { // Нажата кнопка "назад" if (slider.is(':animated')) { return false; } // Если не происходит анимация var course2 = course; // Временная переменная для хранения значения course course = -1; // Устанавливается направление слайдера справа налево animate(); // Вызов функции animate() course = course2 ; // Переменная course принимает первоначальное значение }); next.click(function() { // Нажата кнопка "назад" if (slider.is(':animated')) { return false; } // Если не происходит анимация var course2 = course; // Временная переменная для хранения значения course course = 1; // Устанавливается направление слайдера справа налево animate(); // Вызов функции animate() course = course2 ; // Переменная course принимает первоначальное значение }); slider.add(next).add(prev).hover(function() { // Если курсор мыши в пределах слайдера sliderStop(); // Вызывается функция sliderStop() для приостановки работы слайдера }, nextSlide); // Когда курсор уходит со слайдера, анимация возобновляется. nextSlide(); // Вызов функции nextSlide() });
Получился такой слайдер с кнопками "вперед" и "назад"
Следующим шагом будет добавление к слайдеру кнопок управления
>> JQuery. Простой слайдер (1/3)
>> JQuery. Простой слайдер с кнопками управления (3/3)
Комментарии