Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2012, 13:28
Новичок на форуме
Отправить личное сообщение для Nina_2012 Посмотреть профиль Найти все сообщения от Nina_2012
 
Регистрация: 03.07.2012
Сообщений: 4

Смена изображений автоматом и по кнопкам
Задача: Плавная (автоматическая и цикличная) смена изображений с возможностью переключать изображения вручную по кнопкам (вперед, назад)

Проблема: если вручную перелистывать картинки (например, назад), то текущая пауза setTimeout("xfade('next')", 2500); не успевает отрабатывать. Если эту функцию поставить только в условие, что следующее изображение сменилось автоматически, а не через кнопку, то проблема отпадет, но тогда после пролистывания через кнопку не продолжится автоматическое отображение последующих картинок.
Т.е., код работает, если после нажатия кнопки не нажимается следующая раньше, чем пролистнется картинка

Исходный код:
<div>
    <div class="xfade" id="xfade1" style="background: url('topImg1.png') no-repeat;"></div>
    <div class="xfade" id="xfade2" style="background: url('topImg2.png') no-repeat;"></div>
    <div class="xfade" id="xfade3" style="background: url('topImg3.png') no-repeat;"></div>
</div>
<div>
    <button onclick="xfade('prev')">Prev</button>
    <button onclick="xfade('nextFast')">Next</button>
</div>

<script>
    count = 3;
    next = 1;
    jQuery('#xfade1').fadeTo(800, 1);
    jQuery('#xfade2').fadeTo(1, 0);
    jQuery('#xfade3').fadeTo(1, 0);
    
    function xfade(pos){
        // pos - какая картинка будет следующей
        for(i=1; i<=count; i++){  // определяется текущая картинка
            if(jQuery('#xfade'+i).css('opacity') == '1'){
                next = i+1;
            }
        }
        
        // определяется, какая картинка будет следующей и какая текущая (должна будет затухать)
        if((pos == 'next')  ||  (pos == 'nextFast')){
            prev = next - 1;
            if(next > count) next = 1;
        }else{
            prev = next - 1;
            next = next - 2;
            if(next==0)  next = count;
        }
        if(pos == 'next'){
            jQuery('#xfade'+prev).fadeTo(400, 0);
            jQuery('#xfade'+next).fadeTo(700, 1);
        }else{  // если следующая картинка выбрана с пом. кнопки, то она перерисовывается быстрее
            jQuery('#xfade'+prev).fadeTo(200, 0);
            jQuery('#xfade'+next).fadeTo(300, 1);
        }
        // вот здесь бы условие типа "если во время setTimeout нажали кнопку, то setTimeout прерывается, сразу вызывая xfade('next')"
        setTimeout("xfade('next')", 2500);
    }
    xfade('next');
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2012, 13:54
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Nina_2012,
1. Заводим глобальный Flag cтавим ему true
2. Если флаг в true - автолистание - разрешено
3. По ручному клику Flag ставим в false,
Делетим таймер задержки и автозапуска прокрутки(см ниже),
Cтопим все текущие анимации слайдера.
Прокручивам куда нужно,
В конце клика запускаем таймер задержки(7-10сек) и автозапуска прокрутки,
Flag в true;

Последний раз редактировалось Deff, 03.07.2012 в 14:15.
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2012, 19:03
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

Nina_2012,
Deff верно молвит, так для примера:
<script>
document.ok = 1;
function alPr(){
 if (document.ok == 10) document.ok = 0;
 if (document.ok != 1){document.ok++; return}
 if (document.i == 4){setTimeout('al()', 1000)}
 document.ok++;
}
function al(prov){
 s = document.createElement('span');
 s.innerHTML = 'LOL<br>';
 document.getElementById('div').appendChild(s);
 document.i = 0;
}
document.i = 0;
function text(){
 if (document.i == 5) document.i = 0;
 document.getElementById('text').innerHTML = document.i;
 document.i++;
}
setInterval('text()', 1000);
setInterval('alPr()', 100);
</script>
<span id='text'></span>
<script>
text();
</script>
<div id='div'></div>
<input type='button' value='Кнопка' onclick='al("but")'>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимированная смена изображений kent666 Events/DOM/Window 1 11.01.2012 17:11
Случайная смена изображений sinclairB jQuery 5 24.11.2011 11:26
Повременная смена изображений jozev Элементы интерфейса 2 01.08.2011 18:43
смена изображений sweetj jQuery 4 07.12.2010 10:52
Смена значений SRC от изображений Sparter Общие вопросы Javascript 23 31.10.2009 03:14