Question

我编写了以下函数来将页面的背景图像更改为滑块中的当前幻灯片，但淡入淡出效果仅适用于chrome。如何更改以在其他浏览器中实现相同的效果？

onAfterChange: function (center, index) {

    if (center.currentSlide === 0) {
        $('body').css('backgroundImage' ,  "url('image1.jpg')");
    } else if (center.currentSlide === 1) {
        $('body').css('backgroundImage' ,  "url('image2.jpg')");
    } else if (center.currentSlide === 2) {
        $('body').css('backgroundImage' ,  "url('image3.jpg')");
    } else if (center.currentSlide === 3) {
        $('body').css('backgroundImage' ,  "url('image4.jpg')");
    }
}

我正在使用的CSS看起来像

-webkit-transition: background-image 1s ease;
-moz-transition: background-image 1s ease;
-ms-transition: background-image 1s ease;
-o-transition: background-image 1s ease;
transition: background-image 1s ease;

Answer 1

我最终使用了jQuery插件anystretch。像backstretch一样工作，但也提供了指定淡入淡出时间的选项。

我编辑的代码：

if (center.currentSlide === 0) {
                $('body').anystretch("images/sign.png", {speed:1500});
            } else if (center.currentSlide === 1) {
                $('body').anystretch("images/temple.png", {speed:1500});
            } else if (center.currentSlide === 2) {
                $('body').anystretch("images/park.png", {speed:1500});
            } else if (center.currentSlide === 3) {
                $('body').anystretch("images/water.png", {speed:1500});
            }

如何淡化背景图像

1 个答案: