Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.02.2014, 23:49
Аспирант
Отправить личное сообщение для Иззет Посмотреть профиль Найти все сообщения от Иззет
 
Регистрация: 22.11.2013
Сообщений: 39

Проблема реализации небольшого слайдера
Здравствуйте, нужно прописать некий слайдер. Задача выглядит так:
Имеется массив с некоторым количеством элементов. Нужно по очереди доставать элемент из массива, выводить его на экран, далее через заданный интервал данный элемент исчезает и цикл повторяется (выводится следующий элемент массива и т.д.). При этом, после последнего элемента снова должен выводиться первый, т.е. процесс должен замыкаться.

Так и не смог доработать цикл
Ответить с цитированием
  #2 (permalink)  
Старый 03.02.2014, 00:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Иззет,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body> <p></p><p></p><p></p>
<script>
   var p = document.querySelectorAll('p')
    var arr = [1,2,3], n = 0;
    function slider()
    {
       p[0].innerHTML=arr[n];
       n++;
       if(n == arr.length) n = 0;
        window.setTimeout(slider, 1000)
    };
    var arr1 = ['раз','два','три'], n1 = 0;
    function slider1()
    {
       p[1].innerHTML=arr1[n1];
       n1 =   ++n1%arr.length;
       window.setTimeout(slider1, 1000)
    };
    var arr2 = ['|','||','|||'], n2;
    function slider2()
    {
       n2 = arr2.shift();
       arr2.push(n2)
       p[2].innerHTML=n2;
       window.setTimeout(slider2, 1000)
    };
    slider();
    slider1();
    slider2();
</script>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 03.02.2014, 19:17
Аспирант
Отправить личное сообщение для Иззет Посмотреть профиль Найти все сообщения от Иззет
 
Регистрация: 22.11.2013
Сообщений: 39

Спасибо. Адаптировал ваш код, ещё проблема вышла: Дело в том, что элемент массива плавно выводиться и плавно исчезать. Попробовал дописать код, но анимация работает только на 1-ом элементе.
Ответить с цитированием
  #4 (permalink)  
Старый 03.02.2014, 20:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Иззет,
а ваш код где?
готовое решение на jquery Помогите со слайдером пожалуйсто.
и без jquery
Автоматическая смена картинок через заданное время
поиск по форуму и будут ещё варианты
Ответить с цитированием
  #5 (permalink)  
Старый 04.02.2014, 01:28
Аспирант
Отправить личное сообщение для Иззет Посмотреть профиль Найти все сообщения от Иззет
 
Регистрация: 22.11.2013
Сообщений: 39

Взял за основу ваш код, получилось так:
n = 0;
function slider() {
    $('.visible').text(arr[n]).hide().show(500).delay(1500).fadeOut(1000);
    n++;
    if(n == arr.length) n = 0;
        window.setTimeout(slider, 3000)
};
slider();

Дело в том, что данную функцию нужно синхронизировать по времени с другой (с интервалом в 2 сек, та функция сменяет изображения в течение 1 сек). Но после первого цикла функция slider(); начинает отставать по времени, с чем это связано ?
Ответить с цитированием
  #6 (permalink)  
Старый 04.02.2014, 01:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Иззет,
исключите window.setTimeout и добавьте slider в fadeOut будет вам полная синхронизация
Ответить с цитированием
  #7 (permalink)  
Старый 04.02.2014, 01:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Иззет,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <style type="text/css">
   .visible{
     color: #FF0000;
     font-size: 24px;
     text-decoration: none
   }

  </style>
</head>

<body>
     <a href="#" class="visible">test</a>
  <script>
     var arr = [1,2,3,4,5]
     n = 0;
function slider() {
    $('.visible').text(arr[n]).show(500).delay(1500).fadeOut(1000,slider);
    n++;
    if(n == arr.length) n = 0;

};
slider();

  </script>
</body>

</html>
Ответить с цитированием
  #8 (permalink)  
Старый 04.02.2014, 01:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Иззет,
наверно я вас не понял но 2 слайдера сложно синхронизировать -- Минимальная задержка таймера делайте всё одним слайдером
Ответить с цитированием
  #9 (permalink)  
Старый 04.02.2014, 12:10
Аспирант
Отправить личное сообщение для Иззет Посмотреть профиль Найти все сообщения от Иззет
 
Регистрация: 22.11.2013
Сообщений: 39

Да, в этом вся загвоздка, потому что цифры я сопоставил точно. Спасибо за помощь и ссылку.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с конструктором слайдера. PashPP Общие вопросы Javascript 4 27.08.2012 12:27
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема с Popup окном vovuslik jQuery 5 12.06.2010 16:12
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47