Я хочу создать свой собственный плагин jQuery, например, jCarousel.Это работает, но проблема, когда я покидаю страницу и остаюсь на 40 секунд в Chrome и 1-2 минуты в Firefox, это делает все img видимым.В Опере работает нормально.Я использую переменную для текущего изображения и утешаю ее в тот момент, когда плагин должен скрыть изображение.Когда я покидаю страницу, я получаю attr style = "opacity: 0" (который должен использоваться для fadeIn).Плагин на моем хостинге, вот ссылка: changeImg Вот код:
(function ($) {
$.fn.changeImg = function (options) {
var def = {
waitla: 5000,
};
var o = jQuery.extend(def, options);
return this.each(function () {
var l = $('img', this).length;
var i = 1;
$('img:not(:first)', this).hide();
$(this).prepend('<div id=changeImg-prev></div>');
$(this).prepend('<div id=changeImg-next></div>');
$(this).prepend('<span id=changeImg-count>' + i + '/' + l + '</span>');
$(this).prepend('<span id=changeImg-play>STOP</span>');
var e = $('img:first', this);
var a = setTimeout(nextImg, o.waitla);
var play_key = true;
$('#changeImg-next').click(nextImg);
$('#changeImg-prev').click(function () {
e.hide();
if (e.prev().is('img')) {
e = e.prev();
e.fadeIn('slow');
i--;
} else {
$('#changeImg img:last').fadeIn('slow');
e = $('#changeImg img:last');
i = l;
};
$('#changeImg-count').text(i + '/' + l);
$('#changeImg-thumbs img').css('opacity', '0.5');
$('#changeImg-thumbs img[src*=' + i + ']').css('opacity', '1');
if (play_key) {
clearTimeout(a);
a = setTimeout(nextImg, o.waitla);
};
});
$('#changeImg-thumbs img:not(:first)').css('opacity', '0.5');
$('#changeImg-play').click(function () {
if (play_key) {
$(this).text('PLAY');
play_key = false;
clearTimeout(a);
} else {
$(this).text('STOP');
play_key = true;
a = setTimeout(nextImg, o.waitla);
};
});
$('#changeImg-thumbs img').hover(function () {
if (e.attr('src') != $(this).attr('alt')) {
$(this).animate({
'opacity': '1'
});
};
},
function () {
if (e.attr('src') != $(this).attr('alt')) {
$(this).animate({
'opacity': '0.5'
});
};
}).click(function () {
thumb = $(this).attr('alt');
$('#changeImg-thumbs img').css('opacity', '0.5');
$(this).css('opacity', '1');
if (e.attr('src') != thumb) {
e.hide();
thumb = thumb.replace('images/', '').replace('.jpg', '');
e = $('#changeImg img[src*=' + thumb + ']');
e.fadeIn('slow');
i = $(this).attr('src');
i = i.replace('changeimg/thumb', '').replace('.jpg', '');
};
$('#changeImg-count').text(i + '/' + l);
if (play_key) {
clearTimeout(a);
a = setTimeout(nextImg, o.waitla);
};
});
function nextImg() {
e.hide();
console.log(e);
if (e.next().is('img')) {
e = e.next();
e.fadeIn('slow');
i++;
} else {
e = $('#changeImg img:first');
e.fadeIn('slow');
i = 1;
};
$('#changeImg-count').text(i + '/' + l);
$('#changeImg-thumbs img').css({
'opacity': '0.5',
});
$('#changeImg-thumbs img[src*=' + i + ']').css('opacity', '1');
if (play_key) {
clearTimeout(a);
a = setTimeout(nextImg, o.waitla);
};
};
});
};
})(jQuery)
Я использую тег 'alt' большого пальца для изменения изображения при нажатии.
ждать ответа.спасибо