Самый простой вариант нецикличной "карусели" можно сделать и средствами CSS, но если требуется усложнить управление и добавить функциональности, то без скриптов не разобраться. В данных примерах я использую варианты jQuery-скрипта, поэтому не забудьте подключить этот фреймворк если будете применять эти разработки.
HTML код не будет изменяться, в данном случаи он одинаково прост для всех предложенных вариантов:
<div class='content'>
<!--элементы навигации - кнопки "влево" и "вправо", дополнительные свойства запрещают выделение кнопок-->
<aonselectstart="return false" onmousedown="return false" class='left_button'><</a>
<aonselectstart="return false" onmousedown="return false" class='right_button'>></a>
<div id='simple_slider'>
<img src='img/1.jpg' />
<img src='img/2.jpg' />
<img src='img/3.jpg' />
<img src='img/4.jpg' />
</div>
</div>
Простой, но элегантный CSS - к нему также дальнейшие манипуляции отношения иметь не будут:<!--элементы навигации - кнопки "влево" и "вправо", дополнительные свойства запрещают выделение кнопок-->
<a
<a
<div id='simple_slider'>
<img src='img/1.jpg' />
<img src='img/2.jpg' />
<img src='img/3.jpg' />
<img src='img/4.jpg' />
</div>
</div>
.content { position: relative; border: 10px solid #FFF; box-shadow: 0px 0px 15px #666; text-align: left; margin: 0 auto; width: 600px; height: 450px; /*высота с учетом высоты кнопок*/ } #simple_slider { overflow: hidden; } /*для изображений сразу задаем необходимые размеры*/ #simple_slider img { position: absolute; width: 600px; height: 400px; left:0; top:0; } .left_button, .right_button { display:block; position: absolute; top: 50%; z-index: 9999; background: #666; border: 1px solid #FFF; cursor: pointer; color: #FFF; text-align: center; font: normal bold 48px/48px 'Advent Pro', sans-serif; opacity: .5; padding: 5px; width: 30px; height: 50px } .left_button { box-shadow: -2px 0px 5px #666; border-radius: 100px 0 0 100px; left: -50px; /*расположение кнопки*/ } .right_button { box-shadow: 2px 0px 5px #666; border-radius: 0 100px 100px 0; right: -50px; } .right_button:hover, .left_button:hover { color: #FFF; opacity: 1; text-decoration: none; }
Вариант самого простого цикличного слайдера без анимации
Суть заключается в следующем - по средствам CSS, изображения располагаются, как бы, "стопкой" и последняя в HTML-коде картинка (сверху-вниз), по-умолчанию будет находится "сверху", т.е. будет видна, остальные - нет, т.к. "спрятаны" за ней. Работа скрипта слайдера заключается в том, чтобы поочередно менять местами элементы в списке с помощью доступных функций.$(function(){
$('a.left_button').click(function(){
$('#simple_slider > :first-child').appendTo('#simple_slider'); //находит первый дочерний элемент в блоке и устанавливает его в конец списка
});
$('a.right_button').click(function(){
$('#simple_slider > :last-child').prependTo('#simple_slider'); //находит последний дочерний элемент и устанавливает его в начало списка
});
});
DEMO 1$('a.left_button').click(function(){
$('#simple_slider > :first-child').appendTo('#simple_slider'); //находит первый дочерний элемент в блоке и устанавливает его в конец списка
});
$('a.right_button').click(function(){
$('#simple_slider > :last-child').prependTo('#simple_slider'); //находит последний дочерний элемент и устанавливает его в начало списка
});
});
Простой циклический слайдер с анимацией
Работает также как и предыдущий вариант, но принцип немного другой:$(function(){
$('#simple_slider img:lt(-1)').hide(); //скрываем все изображения, кроме последнего в списке
$('a.left_button').click(function(){
$('#simple_slider > img:first-child').fadeIn().appendTo('#simple_slider').end().siblings('img').fadeOut();
}); //показываем первую картинку, перемещаем в конец списка, скрываем все соседние элементы
$('a.right_button').click(function(){
$('#simple_slider > img:last-child').fadeOut().prev('img').fadeIn().end().prependTo('#simple_slider');
}); //скрываем последнее изображение, показываем предыдущие, переносим в начало
});
DEMO 2$('#simple_slider img:lt(-1)').hide(); //скрываем все изображения, кроме последнего в списке
$('a.left_button').click(function(){
$('#simple_slider > img:first-child').fadeIn().appendTo('#simple_slider').end().siblings('img').fadeOut();
}); //показываем первую картинку, перемещаем в конец списка, скрываем все соседние элементы
$('a.right_button').click(function(){
$('#simple_slider > img:last-child').fadeOut().prev('img').fadeIn().end().prependTo('#simple_slider');
}); //скрываем последнее изображение, показываем предыдущие, переносим в начало
});
Есть одна особенность. Если просто добавить анимацию к первому примеру таким образом:
$(function(){
$('#simple_slider img:lt(-1)').hide();
$('a.left_button').click(function(){
$('#simple_slider > img:first-child').fadeIn().appendTo('#simple_slider').siblings('img').fadeOut();
});
$('a.right_button').click(function(){
$('#simple_slider > img:last-child').fadeIn().prependTo('#simple_slider').siblings('img').fadeOut();
});
Тогда для показа первого предыдущего слайда, (первой прокрутки назад), потребуется сделать два клика по кнопке, вместо одного. Это произойдет потому что видимый элемент, сначала будет показан внизу списка, а потом, при возврате, он же будет перенесен скриптом наверх и показан снова. Следующий клик покажет предшествующие изображение$('#simple_slider img:lt(-1)').hide();
$('a.left_button').click(function(){
$('#simple_slider > img:first-child').fadeIn().appendTo('#simple_slider').siblings('img').fadeOut();
});
$('a.right_button').click(function(){
$('#simple_slider > img:last-child').fadeIn().prependTo('#simple_slider').siblings('img').fadeOut();
});
RESULT
Не циклический анимированный слайдер
Не всегда нужно давать пользователю возможность прокручивать элементы карусели бесконечно, в некоторых случаях необходимо наглядно указать что просмотрено все содержимое слайдера, т.е. остановить перелистывание при достижении последнего элемента списка. Решение этого вопроса очень простое - необходимо просто скрыть элемент управления, когда откроется последний слайд.При данной задаче, скрипт получился таким:
$(function(){
$('#simple_slider img:lt(-1)').hide();
$('#simple_slider img:eq(-1)').addClass('counting'); //добавляем специальный класс к последнему элементу списка
$('a.right_button').hide();
$('a.left_button').click(function(){
$('#simple_slider > :first-child').fadeIn().appendTo('#simple_slider').end().siblings('img').fadeOut();
//если порядковый номер элемента меньше или равен "0"(счет начинается с нуля) - скрываем кнопку "вперед"
if($('.counting').index() <= 0){$('a.left_button').fadeOut(100);}
else {$('a.left_button, a.right_button').fadeIn();}
});
$('a.right_button').click(function(){
$('#simple_slider > :last-child').fadeOut().prev('img').fadeIn().end().prependTo('#simple_slider');
//если порядковый номер элемента больше или равен сумме всех элементов - 1 - скрываем кнопку "назад"
if($('.counting').index() >= $('#simple_slider > img').length - 1){$('a.right_button').fadeOut(100);}
else {$('a.left_button, a.right_button').fadeIn();}
});
});
DEMO 3$('#simple_slider img:lt(-1)').hide();
$('#simple_slider img:eq(-1)').addClass('counting'); //добавляем специальный класс к последнему элементу списка
$('a.right_button').hide();
$('a.left_button').click(function(){
$('#simple_slider > :first-child').fadeIn().appendTo('#simple_slider').end().siblings('img').fadeOut();
//если порядковый номер элемента меньше или равен "0"(счет начинается с нуля) - скрываем кнопку "вперед"
if($('.counting').index() <= 0){$('a.left_button').fadeOut(100);}
else {$('a.left_button, a.right_button').fadeIn();}
});
$('a.right_button').click(function(){
$('#simple_slider > :last-child').fadeOut().prev('img').fadeIn().end().prependTo('#simple_slider');
//если порядковый номер элемента больше или равен сумме всех элементов - 1 - скрываем кнопку "назад"
if($('.counting').index() >= $('#simple_slider > img').length - 1){$('a.right_button').fadeOut(100);}
else {$('a.left_button, a.right_button').fadeIn();}
});
});
На этом все. Как и прежде - замечания, критика и пожелания принимаются в комментариях. Всем успехов.
©http://magentawave.com
Комментариев нет:
Отправить комментарий