Question

我遇到了这个javascript代码的问题。它在背景和前景div之间每隔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

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;

所以这已经解决了。

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

1 个答案: