Смена изображений автоматом и по кнопкам
 

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

Проблема: если вручную перелистывать картинки (например, назад), то текущая пауза 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>

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

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")'>