Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2015, 20:33
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Автопрокрутка слайдера
Добрый день, я новичок в jquery и не могу заставить слайдер прокручиваться автоматически. Помогите сделать автопрокрутку слайдов. Вот мой код:
$(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;
});
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2015, 20:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,043

Dark19,
сделать дубликат функции sliderJS
Сообщение от Dark19
$(ul).animate({marginLeft: "-"+step*obj}, 500 сюда добавить функцию со счётчиком и повторным запуском этого дубликата); //
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2015, 21:36
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Сообщение от рони Посмотреть сообщение
Dark19,
сделать дубликат функции sliderJS
там sliderJS вызывается по клику, а как сделать чтобы автоматом прокрутка была? Пробовал setInterval, но что-то не очень получается.
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2015, 21:45
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

В интерфейсах есть тема про каруселеписателей, загляните, может что полезное найдете.
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2015, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,043

Dark19,
сделайте макет на пару слайдеров
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2015, 00:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,043

очередной слайдер с автопрокруткой
Dark19,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
     width: 50px;
     float: left;
  }
  .nav{
    width: 100px;

  }

  span {
     display: inline-block;
     cursor: pointer;
     height: 20px;
     width: 20px;
     background-color: #0066FF;
     border-radius: 50%;
  }
 .on{
   background-color: #FF3366;
 }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(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"); // делаем активным первый элемент меню
    });
    autoJS (0, $(".slider")[1])

});
function autoJS (obj, sl) { // slider function
    var ul = $(sl).find("ul"); // находим блок
    var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
    var step = $(bl).width(); // ширина объекта
    $(sl).find("span").removeClass("on").eq(obj).addClass("on")
    $(ul).animate({marginLeft: "-"+step*obj}, obj ? 500 : 0, function() {
    var len = ul.find("li").length
    obj = ++obj % len;
    window.setTimeout(function() {
     autoJS (obj, sl)
}, 1000)

}); // 500 это скорость перемотки
}

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;
});

  </script>
</head>

<body>
<div class="slider">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<div class="slider">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автопрокрутка слайдера kolhoz jQuery 0 22.04.2015 10:28
Не работает автопрокрутка слайдера Alexbelkevich Элементы интерфейса 7 05.04.2015 14:52
Два слайдера на странице ureech Элементы интерфейса 1 14.05.2014 14:56
Изменение стандартного слайдера JQ UI UltraFreizer Элементы интерфейса 4 22.08.2013 12:46
Два слайдера на странице с одинаковыми классами работают одновременно. SlafkoCe jQuery 4 14.12.2012 10:44