在 FF 和 IE7/8/9 上工作时，带有淡入淡出的 Javascript slider 在 chrome 上失败

Question

我遇到了这个 javascript 代码的问题。它每 6 秒在背景和前景 div 之间淡入淡出，以创建一个 slider 。它在 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

Answer 1

安装 Chrome 开发人员工具并进行一些调试后，我发现这对我来说似乎是 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;

通过:

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

所以这已经解决了。