X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Автоматическая прокрутка слайдов.
statMan
statMan
Topic Starter сообщение 4.10.2014, 14:35; Ответить: statMan
Сообщение #1


Новичок
*

Группа: User
Сообщений: 32
Регистрация: 1.10.2014
Поблагодарили: 1 раз
Репутация:   0  


Подскажите как сделать, что бы слайды автоматически перелистывались.

$(document).ready(function() {
$(".slider").each(function () { // обрабатываем каждый слайдер
var obj = $(this);
$(obj).append("<div class='nav'></div>");
$(obj).find("li").each(function () {
$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
$(this).addClass("slider"+$(this).index());
});
$(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
});
});
function sliderJS (obj, sl) { // slider function
var ul = $(sl).find("ul"); // находим блок
var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
var step = $(bl).width(); // ширина объекта
$(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки
}
$(document).on("click", ".slider .nav span", function() { // slider click navigate
var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
$(sl).find("span").removeClass("on"); // убираем активный элемент
$(this).addClass("on"); // делаем активным текущий
var obj = $(this).attr("rel"); // узнаем его номер
sliderJS(obj, sl); // слайдим
return false;
});
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fastflow
fastflow
сообщение 8.10.2014, 1:09; Ответить: fastflow
Сообщение #2


Участник
***

Группа: User
Сообщений: 114
Регистрация: 5.10.2014
Поблагодарили: 34 раза
Репутация:   4  


Одного JS кода мало. Давайте еще и HTML код слайдов
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
statMan
statMan
Topic Starter сообщение 11.10.2014, 7:58; Ответить: statMan
Сообщение #3


Новичок
*

Группа: User
Сообщений: 32
Регистрация: 1.10.2014
Поблагодарили: 1 раз
Репутация:   0  


fastflow,
<div style="width:1125px; height:300px; margin: 0 auto;">
<div class="slider" style="float:left; border:1px solid #999;">
<ul>
<li><a href="#"><img src="{THEME}/images/1.png" alt=""></a></li>
<li><a href="#"><img src="{THEME}/images/2.png" alt=""></a></li>
<li><img src="{THEME}/images/3.png" alt=""></li>
<li><img src="i/4.jpg" alt=""></li>
<li><img src="i/5.jpg" alt=""></li>
</ul>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SibHronik
SibHronik
сообщение 5.12.2014, 7:43; Ответить: SibHronik
Сообщение #4


Новичок
*

Группа: User
Сообщений: 17
Регистрация: 4.12.2014
Поблагодарили: 0 раз
Репутация:   0  


Тоже интересно, ща покопаюсь
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
QUASAR
QUASAR
сообщение 20.1.2015, 18:16; Ответить: QUASAR
Сообщение #5


Новичок
*

Группа: User
Сообщений: 36
Регистрация: 18.1.2015
Из: Россия
Поблагодарили: 6 раз
Репутация:   1  


Простой слайдер на jQuery пользуюсь сам.
http://siteis.ru/str/templ.php?id=1
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужно сделать несколько красивых слайдов
1 karambas 579 9.8.2017, 7:54
автор: Alex_100
Открытая тема (нет новых ответов) Автоматическая синхронизация магазина на WooCommerce c разделом Товары ВКонтакте
VKMarket for WooCommerce
1 alekseysolo 1350 16.2.2016, 14:04
автор: alekseysolo
Открытая тема (нет новых ответов) Автоматическая рассылка предложений в РАТАПОСТЕ
9 lyah 1009 29.12.2013, 23:15
автор: lyah
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыtrustRegger - автоматическая регистрация на трастовых сайтах
90 websky 21109 5.8.2013, 14:54
автор: avantus
Горячая тема (нет новых ответов) Автоматическая регистрация на трастовых сайтах - изучаю спрос
70 knaipa 17295 10.10.2011, 15:24
автор: 1001pp


 



RSS Текстовая версия Сейчас: 14.12.2017, 8:43
Дизайн