Создание и тестирование плагина слайд-шоу jqueryJquery

Программирование на jquery
Ответить
Anonymous
 Создание и тестирование плагина слайд-шоу jquery

Сообщение Anonymous »

Я хочу создать свой собственный плагин jQuery, например jCarousel.
Он работает, но проблема, когда я покидаю страницу и остаюсь на ней примерно 40 секунд в Chrome и 1-2 минуты в Firefox, все изображения становятся видимыми. Он отлично работает в Opera.
Я использую var e для текущего изображения и консолью его в тот момент, когда плагин должен скрыть изображение.
Когда я покидаю страницу, получаю attr style="opacity:0" (который должен использоваться для FadeIn).
Вот код:

Код: Выделить всё

(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('');
$(this).prepend('');
$(this).prepend('' + i + '/' + l + '');
$(this).prepend('STOP');
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» для изображения большого пальца, чтобы изменить изображение по щелчку.
дождитесь ответа. спасибо .

Подробнее здесь: https://stackoverflow.com/questions/836 ... nd-testing
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»