Бесконечный цикл js в разных браузерах - PullRequest
Новая
       51

Бесконечный цикл js в разных браузерах

0 голосов
/ 26 ноября 2011

Я пытаюсь сделать бесконечно вращающийся ролик с помощью jQuery.Этот ролик изображения переключается между изображениями с интервалом в 5000 миллисекунд, затем затухает «старое» изображение и затухает в «новом» изображении.Отображаемое изображение имеет атрибут style для «display: inline».

Код можно найти ниже: 

function switchImage(){

    var selector = $('#fotoreel img[style="display: inline; "]');
    var nextOne = $(selector).next();
    if($(nextOne).length == 0)
    {
        var nextOne = $('#fotoreel img:first');
    }
    $(selector).fadeOut('normal',function(){
        $(nextOne).fadeIn('normal');
    });
    var t = setTimeout("switchImage()",5000);
}

$(document).ready(function(){
    setTimeout("switchImage()",5000);
});

Проблема заключается в том, что он отлично работает в Chrome, нов Firefox и в Opera он только один раз сдвигает изображение.В IE это хуже;там это вообще не работает.

Ребята, вы знаете лучший способ бесконечного цикла с javascript?Теперь я использую setTimeout () для повторного вызова функции, но это не похоже на работу.

РЕДАКТИРОВАТЬ

Хорошо, спасибокаждый!Такие быстрые ответы, потрясающе!

Я использовал решение, которое заключалось в добавлении класса и поиске его вместо стиля.Экран display: inline, по-видимому, не представлял проблемы, но все браузеры по-разному реализовали функцию jQuery fadeIn ().

Я именно хотел отфильтровать ТОЧНО по «display: inline;», потому что пробелы были добавлены в Chrome, но не в IE, FF или Opera.Так что это означает, что атрибут style не был точно фильтруемым.Глупый я!:)

Я убедился, что класс добавлен к изображению, которое отображается в данный момент, и нашел следующий, отфильтровав этот класс.Теперь это работает как шарм.

Спасибо всем за ваши ответы, я люблю это место!: D

Ответы [ 3 ]

2 голосов
/ 26 ноября 2011

Это наиболее вероятно, потому что вы проверяете атрибут style, который очень несовместим в браузерах.IE не работает вообще или работает с различным количеством пустого пространства.Просто упростите ваш селектор, чтобы использовать класс или ":visible"

0 голосов
/ 26 ноября 2011

Это не сработало, потому что браузерам, которые вы упомянули, не понравился дисплей: использовался встроенный селектор.

Я получил его, используя следующее: 

function switchImage() {
    var selector = $('#fotoreel img:visible');
    var nextOne = selector.next();
    if (nextOne.length == 0) {
        var nextOne = $('#fotoreel img:first');
    }
    selector.fadeOut('normal', function () {
        nextOne.fadeIn('normal');
    });
    var t = setTimeout(switchImage, 5000);
}

$(document).ready(function () {
    setTimeout(switchImage, 5000);
});
0 голосов
/ 26 ноября 2011

Вероятно, будет лучше, если вы явно пометите изображения классом: 

function switchImage(){

  var selector = $('#fotoreel img.current');
  var nextOne = $(selector).length ? $(selector).next();
  if($(nextOne).length == 0)
  {
    var nextOne = $('#fotoreel img:first');
  }
  $(selector).fadeOut('normal',function() {
    $(selector).removeClass('current');
    $(nextOne).addClass('current').fadeIn('normal');
  });
  setTimeout(switchImage, 5000);
}

$(document).ready(function(){
  $('#fortoreel img:last-child').addClass('current');
  setTimeout(switchImage,5000);
});

Обратите внимание, что в моих вызовах "setTimeout ()" я передаю прямую ссылку на функцию вместо строковой версии кода для ее вызова.

...