Создаем слайды на jquery
Доброго времени суток дорогой читатель Блога RS! Перед тем как продолжить разработку cms хотелось бы немного отвлечься. Настроение у меня пред праздничное, поэтому как то не особо хочется сейчас садиться за разработки... Сегодня я поделюсь с Вами еще одним скриптом, слайды называется... Скрипт не очень сложный, поэтому именно его и выложу сегодня. Я как всегда приведу Вам логику скрипта, после чего выложу Вам архив с тестовой страничкой
Теория
Как перегонять изображения из одной точки в другую? Давайте создадим для начала пять поочередно расположенных изображений:
<table id="slide" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td width="135px"><img src="img/1.jpg" border="0px"></td>
<td width="135px"><img src="img/2.jpg" border="0px"></td>
<td width="135px"><img src="img/3.jpg" border="0px"></td>
<td width="135px"><img src="img/4.jpg" border="0px"></td>
<td width="135px"><img src="img/5.jpg" border="0px"></td>
</tr>
</table>
Я создал таблицу из 5 колонок. В каждую поместил изображение. Вот что получилось:
rs_gallery['39']
Теперь поместим всю эту таблицу в див:
<div style="height:100px;border:1px solid #000;">
<table id="slide" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td width="135px"><img src="img/1.jpg" border="0px"></td>
<td width="135px"><img src="img/2.jpg" border="0px"></td>
<td width="135px"><img src="img/3.jpg" border="0px"></td>
<td width="135px"><img src="img/4.jpg" border="0px"></td>
<td width="135px"><img src="img/5.jpg" border="0px"></td>
</tr>
</table>
</div>
В чем смысл? Сейчас в див мы добавим два элемента css, и Вы все поймете. Элемент который нам очень сильно поможет это overflow. overflow позволяет создать у блока див скролл. Давайте добавим этот элемент:
<div style="height:100px;width:135px;border:1px solid #000;overflow:auto;">
<table id="slide" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td width="135px"><img src="img/1.jpg" border="0px"></td>
<td width="135px"><img src="img/2.jpg" border="0px"></td>
<td width="135px"><img src="img/3.jpg" border="0px"></td>
<td width="135px"><img src="img/4.jpg" border="0px"></td>
<td width="135px"><img src="img/5.jpg" border="0px"></td>
</tr>
</table>
</div>
Внимание. Для появления скроллов у блока див обязательно должна быть фиксированная ширина и высота.
overflow:auto позволяет показывать скороллы когда это нужно. ( для создания слайдов нам не это свойство у элемента нужно, но для того что бы понять как слайд работает, выставим для начала auto ) Вот что получилось:
Теперь все что нам осталось, это автоматически передвигать таблицу с изображениями:
rs_gallery['40']
Практика
Для перемещения таблицы мы будем использовать jquery, а именно animate, вот скрипт:
window.onload = function()//После загрузки страницы...
{
start(0,0);//..запустим функцию старт
}
var slide = 5;//Сколько слайдов всего
var now_slide = 1;//Стартовый слайд
var speed = 3000;//Скорость смены изображения
var width = 135;//ширина изображения
function slider(ml)//Функция слайдов, имеет числовой параметр
{
$("#slide").animate({marginLeft:ml+"px"},300);//двигаем таблицу либо вправо либо влево
}
function start(px,step)//Функция старт, имеет числовое значение на которое будем двигать таблицу влево или вправо
{
if(step == 0)//Двигаем таблицу влево
{
slider(px);//Запускаем функцию слайдов ( собственно это она двигает таблицу )
px = px - width;//Расчитываем новое свойства элемента margin-left у таблицы
now_slide++;//Считаем слайды
if(now_slide == slide)setTimeout("start("+px+",1);",speed);//Если количество пройденных слайдов равно максимальному количество слайдов, то начнем листать изображения обратно
else setTimeout("start("+px+",0);",speed);//Продолжаем листать изображения влево
}
if(step == 1)//Двигаем таблицу вправо
{
slider(px);//Запускаем функцию слайдов ( собственно это она двигает таблицу )
px = px + width;//Рассчитываем новое свойства элемента margin-left у таблицы
now_slide--;//Считаем слайды в обратную сторону
if(now_slide == 1)setTimeout("start("+px+",0);",speed);//Если мы вернулись к первому слайду, то начинаем листать опять в левую сторону
else setTimeout("start("+px+",1);",speed);//Продолжаем листать вправо
}
}
Теперь исправим элемент у дива overflow с auto на hidden ( overflow:hidden ) Это позволит спрятать скролл.
Вот архив с тестовой страницей
Заключение
Сильно напрягаться перед новым годом не нужно 
Если есть какие-нить вопросы, или просто есть, что сказать, комментируйте пост! Удачи Вам, на сегодня у меня все!
Я тоже пытался у себя на сайте сделать некий слайд-шоу из пяти изображений. Если посмотреть - фактически получилось, но есть нюанс. Если переключится в другое окно, а через некоторое время вернуться обратно в окно с моим сайтом - визуально получится зацикливание первого и последнего изображений.
$("#slide").animate({marginLeft:ml+"px"},300);
вот этой строчки:
{queue: false}
То есть исправить вот так:
$("#slide").animate({marginLeft:ml+"px"},{queue: false},300);
В документации пишут что так включается режим "вне очереди". Скрипт теперь работает всегда, даже если Вы свернули окно браузера
<style> #slide-block { position: absolute; top: 100px; left: 250px; height:100px; width:135px; border:1px solid #000; overflow:hidden; } </style> <body> <div id="slide-block"> <table id="slide" cellpadding="0px" cellspacing="0px" border="0px"> <tr> <td width="135px"><img src="img/1.jpg" border="0px"></td> <td width="135px"><img src="img/2.jpg" border="0px"></td> </tr> </table> </div> </body>Если можете посмотрите пожалуйста?!
$(".rightarr").click(function() { if(now_slide<slide) { $("#slide-block").animate({ left: "-=0"+width+"px"},1000); } else { $("#slide-block").animate({ left: "0px"},1000); } });