带有渐变的Javascript滑块在chrome上失败，而在FF和IE7/8/9上工作

Javascript slider with fade fails on chrome while works on FF and IE7/8/9

本文关键字：FF 而在 IE7 工作 失败 Javascript chrome 渐变      更新时间：2023-09-26

我遇到了这个javascript代码的问题。它在背景和前景div之间每6秒进行一次渐变，以创建一个滑块。它在Firefox 9上运行得很好，可能在更低的版本中也可以，我已经测试过它在IE7、IE8和IE9中确实有效。

但在铬中，它只进行第一次褪色，然后图像保持静止。这是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

在安装了Chrome开发工具并进行了一些调试后，我发现这似乎是Chrome javascript引擎上的一个bug。

属性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;

所以这是解决了。

相关文章：