Нужен простой слайдер с автоматической прокруткой. Приступим...
Слайды будут выстроены в линию, и через определенное время будут прокручиваться.
Красной рамкой показана видимая часть слайдера.
В конец слайдера нужно продублировать первый слайд. Это нужно для того, чтоб обеспечить прокрутку от третьего слайда к первому. Также нужно добавить последний слайд в начало для возможности прокрутки в обратном направлении от первого слайда к третьему. Ниже показана работа слайдера в прямом направлении.
Когда слайдер доходит до конца, на место последнего слайда мгновенно помещается его копия из начала слайдера. Затем цикл снова повторяется. Таким образом создается иллюзия бесконечного слайдера.
Для начала сделаем простой слайдер с автоматической прокруткой. Для его работы нужно два контейнера. Первый будет задавать размер видимой области слайдера, а второй нужен для размещения в нем слайдеров. Разметка слайдера будет иметь следующий вид:
<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="" /> </div> </div>
.slider-box{ width:320px; height:210px; overflow:hidden; } .slider{ position:relative; width:10000px; height:210px; } .slider img{ float:left; z-index:0; }
Контейнер .slider-box задает размеры слайдера. С помощью свойства overflow:hidden скрываются все элементы которые не входят в область внутри элемента.
Для контейнера .slider задается большая ширина. Это нужно для того, чтоб в него встрочку поместились все слайды.
Слайды выравниваются с помощью свойства float:left.
Ниже показано схематичное расположение блоков слайдера.
Движение слайдов будет осуществляться с помощью плавного изменения свойства margin-left контейнера .slider.
$(function() { var width=$('.slider-box').width(); // Ширина слайдера. interval = 4000; // Интервал смены слайдов. $('.slider img:last').clone().prependTo('.slider'); // Копия последнего слайда помещается в начало. $('.slider img').eq(1).clone().appendTo('.slider'); // Копия первого слайда помещается в конец. $('.slider').css('margin-left', -width); // Контейнер .slider сдвигается влево на ширину одного слайда. setInterval('animation()',interval); // Запускается функция animation(), выполняющая смену слайдов. }); function animation(){ var margin = parseInt($('.slider').css('marginLeft')); // Текущее смещение блока .slider width=$('.slider-box').width(), // Ширина слайдера. slidersAmount=$('.slider').children().length; // Количество слайдов в слайдере. if(margin!=(-width*(slidersAmount-1))) // Если текущий слайд не последний, { margin=margin-width; // то значение margin уменьшается на ширину слайда. }else{ // Если показан последний слайд, $('.slider').css('margin-left', -width); // то блок .slider возвращается в начальное положение, margin=-width*2; } $('.slider').animate({marginLeft:margin},1000); // Блок .slider смещается влево на 1 слайд. };
В итоге получился простой слайдер с бесконечной автоматической прокруткой.
Следующим шагом будет добавление к слайдеру кнопок "Вперед" и "Назад".
>> JQuery. Простой слайдер с кнопками "Вперед" и "Назад" (2/3)
>> JQuery. Простой слайдер с кнопками управления (3/3)
Комментарии
Сделал простой глайдер на 3 картинки http://coderpro.ru/tmp/easy-glider.zip Пока это черновой вариант на время. Через пару дней добавлю статью по созданию глайдера. Там подробно опишу его создание и сделаю его более универсальным.
Спасибо огромное!!
В скрипте был небольшой косяк. Сейчас все поправил и добавил ссылку на архив с примером.
Сделал все по аналогии, но при перемотке картинка оставляет белое поле, после чего возникает вторая картинка (разрыв). Как сделать их сплошной лентой, как Вы думаете?