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



 

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

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


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

$(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


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


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


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


Простой слайдер на jQuery пользуюсь сам.
http://siteis.ru/str/templ.php?id=1

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Автоматическая перелинковка между страницами Wordpress
4 rokot 1181 28.7.2019, 20:56
автор: rokot
Открытая тема (нет новых ответов) Автоматическая высота grid
0 askjust.ru 1486 13.2.2019, 13:32
автор: -askjust.ru-
Открытая тема (нет новых ответов) Нужно сделать несколько красивых слайдов
1 karambas 1967 9.8.2017, 7:54
автор: Alex_100
Открытая тема (нет новых ответов) автоматическая активация нужных <input type="radio">
1 FALKOR 2976 19.5.2016, 17:18
автор: -Valeron-
Открытая тема (нет новых ответов) Автоматическая синхронизация магазина на WooCommerce c разделом Товары ВКонтакте
VKMarket for WooCommerce
1 alekseysolo 2634 16.2.2016, 14:04
автор: alekseysolo


 



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