Создаем слайды на 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 ) Это позволит спрятать скролл.

Вот архив с тестовой страницей

 

Заключение

 

Сильно напрягаться перед новым годом не нужно Если есть какие-нить вопросы, или просто есть, что сказать, комментируйте пост! Удачи Вам, на сегодня у меня все!

 

Возможно Вам будут интересны следующие заметки

Комментарии (19)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
Seo-blog, 12 Декабря 2011 г. 19:16 пишет:
Читатель
Сказать прямо, сейчас мало кто знает html Css ещё меньше Js, сейчас используют движки, но всё равно было очень интересно почитать :-D
Rio-Shaman, 12 Декабря 2011 г. 20:15 пишет:
Автор
Согласен. Но вдруг кому нить пригодится =)
Ответ для пользователя: Seo-blog
Владимир, 13 Декабря 2011 г. 00:27 пишет:
Гость
Супер, спасибо.
Я тоже пытался у себя на сайте сделать некий слайд-шоу из пяти изображений. Если посмотреть - фактически получилось, но есть нюанс. Если переключится в другое окно, а через некоторое время вернуться обратно в окно с моим сайтом - визуально получится зацикливание первого и последнего изображений.
ИВан, 13 Декабря 2011 г. 00:27 пишет:
Гость
Не самый удачный пример создания слайдера на основе таблиц. Семантически правильнее создавать слайдер на основе списка ul, где в внутри элементов списка li размещеются изображения. Я именно так и делал, при создании своего ротатора баннеров на jQuery. Если интересно, то вот ссылка http://biznesguide.ru/coding/152.html
Rio-Shaman, 13 Декабря 2011 г. 00:32 пишет:
Автор
Уважаемый ИВан, на то оно и программирование, что путей реализации одного и того же результата до фига =)
Ответ для пользователя: ИВан
Rio-Shaman, 13 Декабря 2011 г. 11:35 пишет:
Автор
У скрипта есть маленький глюк, если свернуть окно на некоторое время, после чего вернуться к просмотру слайдов, то можно заметить скоростную прокрутку слайдов, что несколько напрягает. Поковырявшись немного пришел к выводу, что этот досадный глюк лечится добавлением в
$("#slide").animate({marginLeft:ml+"px"},300);
вот этой строчки:
{queue: false}
То есть исправить вот так:
$("#slide").animate({marginLeft:ml+"px"},{queue: false},300);
В документации пишут что так включается режим "вне очереди". Скрипт теперь работает всегда, даже если Вы свернули окно браузера
Rio-Shaman, 16 Декабря 2011 г. 03:54 пишет:
Автор
Уважаемый Владимир, я тоже сталкивался с такой проблемой... пришел к выводу что это особенность jquery. Он скорее всего не зацикливался, а пытался показать Вам сразу всю ту анимацию которую Вы не видели. Эдакая скоростная прокрутка...
Ответ для пользователя: Владимир
Бодя, 12 Июля 2013 г. 13:20 пишет:
Гость
Уважаемый автор, я вот решил реализовать данный пример у себя на сайте, и возник вопрос - как же зделать возможным добавление и удаление слайдов через админку. Если вам не сложно, помогите советом или ссылочкой на данную инфу. Спасибо)
Ответ для пользователя: Rio-Shaman
Артур, 18 Октября 2013 г. 12:13 пишет:
Гость
Скажите пожалуйста! А почему нельзя присвоить абсолютное позиционирование для слайда? Почему то при абсолютном позиционирование становятся видны по мимо первой картинки и остальные картинки. Как это можно исправить?
Алексей, 18 Октября 2013 г. 13:13 пишет:
Автор
Для какого HTML тега Вы вставляете стиль абсолютного позиционирования?
Ответ для пользователя: Артур
Артур, 18 Октября 2013 г. 14:50 пишет:
Гость
Пытаюсь в css файле на селектор id="slide" поставить абсолютное позиционирование. Пример: #style {position: absolute; top: 100px; left: 250;} В итоге он позиционирует, но становятся видны все фотографии. Что делать не пойму?
Артур, 18 Октября 2013 г. 14:53 пишет:
Гость
Прошу прощения за опечатку! id="slide"! На этот селектор делаю!
Артур, 18 Октября 2013 г. 14:58 пишет:
Гость
#slide {position: absolute; top: 100px; left: 250;}
Алексей, 18 Октября 2013 г. 15:06 пишет:
Автор
Все ломается из-за того что Вы выдергиваете слайд из окошка, который скрывает все лишнее (у слайда). Единственное что я могу посоветовать, это писать вот так:
<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>
Ответ для пользователя: Артур
Артур, 18 Октября 2013 г. 16:07 пишет:
Гость
Спасибо за информацию получилось! Мне очень приятно что сразу ответили! Буду почаще заходить к вам на форум! Для меня как для новичка в jquery после css, xhtml и bat - языка ваш код приятно читаемый, в отличие от других ресурсов, где коды для меня пока полный бред, надеюсь в дальнейшем понять и освоить язык jquery и java-script. Если можно еще вопрос: почему при попытке вынести сам код в файл .js слайд перестает работать? И можно ли прицепить ручное управление?
Артур, 19 Октября 2013 г. 03:42 пишет:
Гость
Доброй ночи! Я написал код для переключателей слайда, теперь при кликанье первое фото смещается но появились ошибки, это фото остается визуально активным , и почему остальные фото не отображаются?
Если можете посмотрите пожалуйста?!
$(".rightarr").click(function() {
if(now_slide<slide) {
$("#slide-block").animate({ left: "-=0"+width+"px"},1000);
}
else {
 $("#slide-block").animate({ left: "0px"},1000);
}
});
Алексей, 19 Октября 2013 г. 14:39 пишет:
Автор
почему при попытке вынести сам код в файл .js слайд перестает работать?
Все зависит от того в какой Вы последовательности подключаете скрипт. Может файл jquery идет после подключения слайда, тогда естественно ничего работать не будет.
И можно ли прицепить ручное управление?
По идеи сделать можно совершенно все, но это как говорится, совсем другая история =)
Ответ для пользователя: Артур
Алексей, 19 Октября 2013 г. 14:41 пишет:
Автор
По данному отрывку кода довольно сложно сказать почему у Вас что-то там не работает. Пока что у меня один вопрос, что это такое:
left: "-=0"+width+"px"
Не знаю что за запись "-=0" и откуда взялась переменная width
Ответ для пользователя: Артур
Артур, 23 Октября 2013 г. 12:53 пишет:
Гость
Прошу меня извинить за столь долгий ответ! При нажатие на rightarr селектор #slide-block сдвигается в лева ровно на переменную width. При попытки в место #slide-block подставить #slide какая то ни была активность слайда пропадает! запись "-=0" значит сдвиг в лева 1 раз:)
Ответ для пользователя: Алексей