так что я немного ржавый с моим JS, но вот мой код ... В основном у меня есть изображение, которое при наведении курсора на него курсирует через скрытый div, полный других изображений ... затухание он заменит src и затухает обратно. Он отлично работает. но как только он пройдет через все изображения, я хочу, чтобы он начал возвращаться и продолжал прокручивать их до тех пор, пока событие mouseout не остановит его.quit loop on JS event
Я думал, что могу просто вызвать функцию снова изнутри функции cycle_images($(current_image));
, но это приводит к тому, что браузер, конечно, избавляется. что является хорошим методом для этого?
$.fn.image_cycler = function(options){
// default configuration properties
var defaults = {
fade_delay: 150,
image_duration: 1500,
repeatCycle: true,
};
var options = $.extend(defaults, options);
this.each(function(){
var product = $(this);
var image = $('div.image>a.product_link>img', product);
var description = $('div.image>div.description', product);
var all_images = $('div.all_images', product);
var next_image = ($(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img').attr('src')) ? $(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img') : $(all_images).children('img').first();;
// mouseover
image.fadeOut(options.fade_delay, function(){
image.attr('src', next_image.attr('src'));
image.fadeIn(options.fade_delay);
});
if (options.repeatCycle){
var loop = function() {
product.image_cycler();
}
setTimeout(loop,options.image_duration);
}
});
};
$(document).ready(function() {
$('div.product').hover(function(){
$(this).image_cycler();
}, function(){
$(this).image_cycler({repeatCycle: false});
});
});
Я бы посоветовал не использовать все изображения в .each, но используя 'var img = $ ('div.image div.all_images img: first') 'и продолжаем с помощью' var img = $ (this) .next() || $ ('div.image div.all_images img: first'); '(или somthing of the sort). –