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

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


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

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

05.03.2013 15:54 Администратор Jquery
Печать PDF
Прошлой темой по jquery мы разобрали как сделать простой слайдер на jquery. В этой теме мы продолжим работу над слайдером и залатаем существующие в нем недочеты. Думаю все кто читал прошлую тему и пробовал слайдер на деле заметили что смена слайдов в слайдере сбивается при хаотичном нажатием на на стрелки перелистывания. Именно от этой неприятной ситуации мы сегодня и будем избавлятся.

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

Хорошо теперь давайте запустим наш слайдер и 2 раза быстро нажмем на стрелочку вправо. Как видите на изображении ниже положение слайдов сбилось.

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

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

Когда вы нажимаете на стрелку слайдера первый раз то для выполнения перелистывания нужно время, а вы не ждете когда слайд полностью сменится и нажимаете стрелочку еще раз в следствии чего происходит смещение так как эффект еще не выполнен до конца, а вы его вновь заставляете что то делать. Представьте ситуацию вы несете советский телевизор, а в догонку вам на него ставтя еще один. Сможете ли вы выполнить качественно сразу две задачи. Думаю нет, еще и не дай бог травму получите, так как советский телевизор мало того что он неудобный он еще и тяжелый (цветной большой советский телевизор мог весить килограммов 20).

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var process=0;
var countitem=0;
$(document).ready(function() {
$('.list-portfel li').each(function(index, element){
++countitem;
});
$('.list-portfel').css('width', 445*countitem);
$('#next').click(function() {
if(process==0){
process=1;
var sl = $('#portfel').scrollLeft();
var newsl = Number(sl)+Number(445);
$('#portfel').animate( {scrollLeft: newsl}, 250, "linear", function(){process=0;});
}
});
$('#prev').click(function() {
if(process==0){
process=1;
var sl = $('#portfel').scrollLeft();
var newsl = sl-445;
$('#portfel').animate( {scrollLeft: newsl}, 250, "linear", function(){process=0;});
}
});
});
</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>

 Как видите код никаких существенных изменений не перетерпел. Добавилось лишь 2 условия, переменная и еще в функцию animate теперь передается больше параметров. В данном случае следует обратить внимание на последний параметр который ей передается. Этот параметр создан для того чтоб можно было выполнить какие либо действия после того как эффект будет выполнен. Туда можно вписать выполнение какой то пользовательской функции либо если код не большой вставить его непосредственно туда, впрочем так мы и поступили.

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

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


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

Поиск

Голосование

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