Question

JQuery相对较新。我有一些代码可以实现横幅交换，淡入淡出过渡。图像在IE8，chrome和firefox中按预期交换。但是，实际淡入淡出，图像之间的平滑过渡仅适用于IE。

有人能指出我正确的方向进行修复吗？

使用Javascript：

function swapImages() {
            var $active = $('#transitionImagePlaceHolder .active');
            var $next = ($('#transitionImagePlaceHolder .active').next().length > 0) ? $('#transitionImagePlaceHolder .active').next() : $('#transitionImagePlaceHolder img:first');

            $active.fadeOut( 'slow', function () {

                $next.fadeIn('slow').addClass('active');
                $active.removeClass('active');
            });
        }

        $(document).ready(function () {
            setInterval('swapImages()', 5000);
        });

CSS：

#transitionImagePlaceHolder
    {

    }


    #transitionImagePlaceHolder
    {
        position:relative;
        left: 26px;
    }

    #transitionImagePlaceHolder img
    {
        display:none;
        position:absolute;
        top:4;
        left:10;
    }

HTML：

<div id="transitionImagePlaceHolder">

      <img class="active" src="Images/TransitionImages/Trans_Img_1.jpg" />
      <img src="Images/TransitionImages/Trans_Img_2.jpg" />
      <img src="Images/TransitionImages/Trans_Img_3.jpg" />


</div>

Answer 1

使用小而有效的JsSlideshow而不是使用jQuery 查看快速演示here - 它适用于所有浏览器。

可以像这样轻松设置

var sl = new JsSlideshow({
    target: "slideshow",
    images: ["4504470765_90aa261be6.jpg", "images/4510204607_42bbb55d9c.jpg", "images/4510826808_f6edfc906a.jpg", "images/4513712885_0c008e3638.jpg"],
    transition: 3000,
    time: 2000,
    url: "http://www.flickr.com/photos/bobowen"
});

Answer 2

我想说这是因为Firefox和Chrome（可能是正确的）在fadeIn / fadeOut时不会修改display css属性。

快速测试：在css中代替display:none;，在（文档）.ready之后对非活动图像执行快速fadeOut（20 ms）。

如果它能够正常工作，你就会知道你必须找到另一种隐藏图像的方式。

Answer 3

我不确定问题是什么，因为我把下面的例子放在JSFiddle上，它在Safari和Firefox中都运行良好。我唯一能想到的是你在不应该的地方定义你的swapImages功能。您应该在Firefox中安装Firebug并查看是否收到错误。

http://jsfiddle.net/GtV3U/

编辑：我怀疑你需要从$（document）.ready（function（）{中取出setInterval调用。 }）。

为什么我的JQuery Image交换在firefox或chrome中不起作用，但在IE中却不错？

3 个答案: