[imhateb]

Здравствуйте. Помогите пожалуйста. Обидно осознавать, но похоже своим мозгом я это уже не осилю. Всю ночь потратил на попытки .

На странице имеется три блока с баннерами (.banners). Хочу добавить автолисталку для них, чтобы они менялись через определённый интервал.

Делаю вот так:

var interval, timer = 1000;

function startInterval(e) {            
    var cur = parseInt(e.find('.banner.visible').attr('id').replace(/\D+/g,""));
    var col = e.find('.banner').length;

    interval = setInterval(function(){   
       if (cur < col) {cur++} else {cur = 1}  
           e.find('.banner').removeClass('visible');
           e.find('.banner#banner'+cur).addClass('visible'); 
        },timer);
};        

$('.banners').each(function(){startInterval($(this));});

Всё круто, всё листается. Но мне нужно сделать, чтобы при наведении мыши это перелистывание останавливалось в соответствующем блоке с баннерами. И соответственно запускалось когда мышки на баннере нет.

Этот код не помогает в этом (

$('.banners').mouseenter(function(){clearInterval(interval);}); 
$('.banners').mouseleave(function(){startInterval();});

Ну тут понятно, что он запуститься не сможет, так как не ясно к какому блоку баннеров относится startInterval(); после mouseleave.

Но оно даже не останавливается при mouseenter и clearInterval не срабатывает.

Подумал, что в коде непонятно какой именно интервал останавливать. Стал копать в сторону идентификации интервалов, чтобы при попытке остановки обращаться более адресно.
Намутил вот такое:

var interval = [], timer = 1000;

function startInterval(e,i) {            
    var cur = parseInt(e.find('.banner.visible').attr('id').replace(/\D+/g,""));
    var col = e.find('.banner').length;

    i = setInterval(function(){   
       if (cur < col) {cur++} else {cur = 1}  
           e.find('.banner').removeClass('visible');
           e.find('.banner#banner'+cur).addClass('visible'); 
        },timer);
};   

for(var i = 0; i < $('.banners').length; i++) { 
    interval[i] = 'interval'+i;
    $('.banners').eq(i).attr('data',i);
    startInterval($('.banners').eq(i),interval[i]);                        
}

$('.banners').mouseenter(function(){
    var i = $(this).attr('data');
    clearInterval(interval[i]);
});

$('.banners').mouseleave(function(){
    var i = $(this).attr('data');
    startInterval($(this),interval[i]);
});

Но тоже никаких результатов. ((( Листание так и не останавливается при наведении. И я даже не знаю, запустилось ли бы оно если бы остановилось.

Кароче я уже обессилен. Понимаю, что вроде задача простая, а я не могу её решить. От этого грустно. Но надо что-то решать, ибо работа стоит.