Блог старого компьютера

Блог старого компьютера


Главная Jquery Делаем простой слайдер на Jquery (Урок 5)

Делаем простой слайдер на Jquery (Урок 5)

20.02.2013 16:22 Администратор Jquery
Печать PDF

Давно я не писал уроки и не расписывал так как надо что и как работает. Вот сегодня я нашел немного времени и решил рассказать и разжевать как сделать простой, но довольно интересный слайдер на jquery. Как обычно гипер сложного ничего нету так как jquery создан для того чтоб упрощать нам разработку. А представьте что было раньше, для реализации похожего слайдера писался код строк на 50 в котором были рекурсивные функции и разные условия с расчетами сдвига. Урок конечно предназанчен не совсем для новичком, но и не для профессионалов. Ничего так сказать нового я вам не покажу, будем использовать все наработки по jquery из этой категории. Возможно это будет ваш первый настолько стоящий и интересный проект на jquery.

 И так обрисуем общую цель чтоб понимать что все же мы будем создавать. Нам с вами в этом уроке необходимо будет создать простой слайдер который по нажатию кнопки вправо или влево переключал бы изображения в главном блоке. Само собой не просто переключал, а перелистывал их с эффектом.

И так так как код у меня уже готов я представлю его в том обличии в каком он уже есть и далее походу буду давать пояснения построчно. Для удобства расставлю  номера строк коментариями в jquery коде.

И так весь код слайдер выглядит так:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var countitem=0; //1
$(document).ready(function() { //2
$('.list-portfel li').each(function(index, element){ //3
 ++countitem; //4
 }); //5
 $('.list-portfel').css('width', 445*countitem);  //6
 $('#next').click(function() {  //7
 var sl = $('#portfel').scrollLeft(); //8
 var newsl = Number(sl)+Number(445); //9
 $('#portfel').animate( {scrollLeft: newsl}, 'slow'); //10
 }); //11
 $('#prev').click(function() {  //12
 var sl = $('#portfel').scrollLeft(); //13
 var newsl = sl-445; //14
 $('#portfel').animate( {scrollLeft: newsl}, 'slow'); // 15
 }); //16
}); //17
</script>
<style>
#portfel{
width:445px;
overflow:hidden;
height:380px;
border: 1px solid silver;
}

.list-portfel{
margin:0px;
padding:0px;
list-style:none;
width:445px;
}

.list-portfel li{
width:425px;
height:360px;
/*border:1px solid orange;*/
float:left;
margin-right:10px;
margin-left:10px;
margin-top:10px;
}

</style>

<div id="portfel">
<ul class="list-portfel">
<li><img width="425" height="360" src="/img/site300.jpg"></li>
<li><img width="425" height="360" src="/img/site300.jpg"></li>
<li><img width="425" height="360" src="/img/site300.jpg"></li>
<li><img width="425" height="360" src="/img/site300.jpg"></li>
</ul>
</div>
<a href="#" id="prev"><<<</a>
<a href="#" id="next">>>></a>

 И так выше я представил код слайдера и хочу сразу оговорится, я буду пояснять только jquery код. Остальное HTML и CSS предположу что вы уже знаете.

Пояснения к коду

И так первым делом мы как всегда подгружаем какую нибудь не особо древнюю версию библиотеки jquery, лично я это делаю с гугла.

О строках подробнее.

  • 1 строка - объявляем глобальную переменную countitem и присваиваем ей значение 0. Данная переменная у нас будет служить для подсчета колличества слайдов.
  • 2 строка - выполняем код заключенный в ее фигурные скобки только после загрузки страницы
  • 3 строка - запускам цикл который будет обходить все элементы списка
  • 4 строка - если нашли нужный элемент то увеличиваем значение переменной countitem на единицу
  • 5 строка - закрываем тело цикла
  • 6 строка - изменяем динну списка которую расчитываем по формуле колличество элементов списка умноженное на ширину одного списка. Выходит что элемент списка у нас равен 425 и имеет отступ справа и слева по 10 в итоге выходит что мы умножаем колличество на число 445
  • 7 строка - указываем что код заключенный в скобки  необходимо выполнять по клику на элемент с id=next
  • 8 строка - получаем позицию прокрутки блока слева
  • 9 строка - вычисляем на сколько нужно еще прокрутить блок. Вычисляем по формуле положение прокрутки слева + ширина блока
  • 10 строка - запускаем прокрутку блока на ту позицию которую вычислили до этого с помощью рекурсивной функции animate
  • 11 строка - закрываем область кода который необходимо выполнять при клику на объект с id=next

Дальнейшие строки аналогичны предыдущим за исключением того что в ним происходит вычисление позиции прокрутки с помощью вычитания из существующей позиции ширины блока со слайдером.

И так вроде бы все. Постарался пояснить это все простым языком, но если что то все же пояснил некорректно то пишите разберем подробнее.

Поняв как работает код вы можете изменить его под свои нужды, изменить размеры, добавить колличество отображаемых слайдов. Так же вы можете листать в таком слайдере не только какие то фотографии но и любой другой контент который пожелаете.

От себя привожу как обычно скрин того что вышло у меня:

 

Так же прилагаю архив с вот таким вот неоформленным слайдером как на картинке, для тех кому лень что либо делать, а хочется узнать подойдет ли им данный слайдер на jquery

Скачать слайдер на jquery

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?