[Nina_2012]

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

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