Слайдер Javascript с исчезновением не работает на Chrome, хотя работает на FF и IE7 / 8/9 - PullRequest
Новая
       1

Слайдер Javascript с исчезновением не работает на Chrome, хотя работает на FF и IE7 / 8/9

1 голос
/ 01 февраля 2012

У меня проблемы с этим кодом JavaScript.Каждые 6 секунд происходит постепенное затухание между фоном и передним планом, чтобы создать слайдер.Он отлично работает в Firefox 9 и, возможно, в более низких версиях, и я протестировал, что он действительно работает в IE7, IE8 и IE9.

Но в Chrome он просто делает первое замирание, затем изображение остается статичным.Вот код javascript: 

function start_slider () {
    var imgArr = new Array( // relative paths of images
        '/solteros/img/slider/barrancos.png',
        '/solteros/img/slider/karts.png',
        '/solteros/img/slider/parque.png',
        '/solteros/img/slider/canoaraft.png',
        '/solteros/img/slider/paintball.png',
        '/solteros/img/slider/quads.png',
        '/solteros/img/slider/rafting.png'
    );

    var preloadArr = new Array();
    var i;

    /* preload images */
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 0;
    var intID = setInterval(changeImg, 3000);
    var hs = document.getElementById ( 'header_slider' );    
    var hsb = document.getElementById ( 'header_slider_bkg' );
    if ( hs.style.opacity != 1 ) {
         hs.style.opacity = 1; 
    }

    var foInt = null;
    var fiInt = null;
    var imgUrl = "";

    function changeImg () {
        clearInterval ( intID );
        currImg = ( currImg < preloadArr.length-1 ) ? currImg+1 : 0;
        imgUrl = preloadArr[currImg].src;
        hsb.style.background = 'url('+imgUrl+') top center no-repeat';
        foInt = setInterval ( fadeOut, 50 );
    }

    function fadeOut () {
        if ( hs.style.opacity <= 0 ) {
            clearInterval ( foInt );
            hs.style.background = 'url('+imgUrl+') top center no-repeat';
            hs.style.opacity = 1;
            hs.style.filter = 'alpha(opacity=100);'; /* Para IE8 y anteriores */
            intID = setInterval (changeImg, 6000);
        } else {
            hs.style.opacity -= 0.05;
            hs.style.filter = 'alpha(opacity='+(Math.round(hs.style.opacity * 100))+');'; /* Para IE8 y anteriores */
        }
    }
}

Теперь CSS задействован: 

#header_slider_bkg {
    width: 1000px;
    height: 410px;
    min-height: 410px;
    margin: 0;
    padding: 0;
    float: left;
    background: url('/solteros/img/slider/rafting.png');
}

#header_slider {
    width: 1000px;
    height: 410px;
    min-height: 410px;
    margin: 0;
    padding: 0;
    float: left;
    background: url('/solteros/img/slider/rafting.png');
}

И так, HTML: 

    <div id="header_slider_bkg">
        <div id="header_slider">
        </div>
    </div>
    <script type="text/javascript">
        start_slider ();
    </script>

Вопрос, очевидно, почемуэто не работает в Chrome, в то время как он работает во всех других основных браузерах ???

TIA

1 Ответ

1 голос
/ 15 марта 2012

После установки Chrome Developer Tools и небольшой отладки я обнаружил, что мне кажется, что это ошибка в движке Chrome javascript.

Свойство hs.style.opacity начинается с 1. При первом запуске: 

hs.style.opacity -= 0.05

Принимает ожидаемое значение 0,95.Но во второй раз он получает 0,899999999999999 вместо 0,90, как и ожидалось.Цикл продолжается до тех пор, пока он не получит значение 0,4999 ... 9684, затем он, похоже, отказывается от вычитания 0,05, поэтому интервал fadeOut никогда не сбрасывается, поскольку hs.style.opacity никогда не достигает значения 0 или ниже.

Быстрое исправление, похоже, меняется: 

if ( hs.style.opacity <= 0 )

на 

if ( hs.style.opacity < 0.5 )

Но это показывает более широкий разрыв между изображениями при последнем изменении, поэтому лучшим решением может быть округлениепосле вычитания значение равно двум десятичным знакам, поэтому я пробую новый подход, который отлично работает:

Изменение: 

hs.style.opacity -= 0.5;

By: 

aux = Math.round(hs.style.opacity * 100);
aux -= 5;
hs.style.opacity = aux / 100;

Так что это РЕШЕНО.

...