Получить кроссфейд jQuery для остановки изображения при наведении?

Question

Получить кроссфейд jQuery для остановки изображения при наведении?

0

Я создал "цикл" изображений с помощью jQuery, и я хочу, чтобы он остановился, когда зависал, но не знаю, где это сделать. Цикл переключает изображения без замирания между ними, так что это не проблема. Я новичок в jQuery, и хотя я начал понимать концепцию, я далек от этого.

Сейчас скрипт выглядит так:

<script type='text/javascript'>
function cycleImages(){
      var $active = $('#cycler .active');
     var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
  $next.css('z-index',2);
  $active.fadeOut(0,function(){
  $active.css('z-index',1).show().removeClass('active');
      $next.css('z-index',3).addClass('active');
  });
}

$(document).ready(function(){
setInterval('cycleImages()', 120);

})
</script>

Я был бы так счастлив, если бы кто-нибудь мог объяснить, как продолжить отсюда!

j braun 21 дек. 2013, в 01:00

Источник

Теги:

jquery

hover

slideshow

2 ответа

Ещё вопросы

JasonDC · Answer 1 · 2013-12-20T21-42-00.000Z

var myTimer; 

function pauseLoop(){
    clearInterval(myTimer);
}

function startLoop(){
    myTimer = setInterval(cycleImages, 120);
}

$(document).ready(function(){
    startLoop();
    $("#cycler").hover(pauseLoop, startLoop)
})

Инкапсулируйте setInterval() в функции, чтобы запустить и остановить его, а затем запустить функции start/pause.

Надеюсь, это может вас заставить. :)

Большое спасибо, работает как шарм! Теперь, когда я вижу, как это на самом деле выглядит, я думаю, что будет лучше, если цикл начнется снова непосредственно на следующем изображении, вместо ожидания времени, оставшегося на последнем изображении. Знаете ли вы, если это будет действительно сложно, или что-то вроде меня может понять?

JasonDC · Answer 2 · 2013-12-20T21-09-00.000Z

var myTimer; 

function pauseLoop(){
    clearInterval(myTimer);
}

function startLoop(){
    cycleImages();
    myTimer = setInterval(cycleImages, 120);
}

$(document).ready(function(){
    myTimer = setInterval(cycleImages, 120);
    $("#cycler").hover(pauseLoop, startLoop);
})

Небольшой мод для кода должен это сделать. В функции "$ (document).ready" мы просто запускаем таймер, который запускает слайд-шоу. Затем при перезапуске мы запускаем вашу функцию "cycleImages()", а затем перезапускаем таймер.