更改背景并不适用于所有浏览器

时间:2016-01-08 10:10:23

标签: javascript jquery css browser

我有一个脚本可以每隔几秒更改一次背景图像。它适用于我,但是,一些用户报告它不能在Safari浏览器上工作。 我正在使用Chrome,它运行良好,但其中一些也在Google Chrome上存在问题。什么可能导致这个问题的想法?

    changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == 'url("http://example.com/images/new-home-page/woman.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd2.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd3.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman.png")');

            }

            changeBackground();

        }, 6000);
    }

2 个答案:

答案 0 :(得分:1)

尝试添加第一个默认背景图片,可能在safari中无法获取第一场比赛的CSS网址图片:

changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == 'url("http://example.com/images/new-home-page/woman.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd2.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd3.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman.png")');

            // ADD THIS ELSE
            } else {
                  // SET THE FIRST AND DEFAUT BACKGROUND
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")')
                currentBackground = 'url("/images/new-home-page/slajd2.png")';
            }

            changeBackground();

        }, 6000);
    }

The JSFiddle tried in safari for windows.

<强>更新

或者你可以使用更安全的方式,使用计数器而不是像这样的css样式:

changeBackground();

var currentBackground = 0;

function changeBackground(){
  setTimeout(function(){
    console.log(currentBackground);
    if (currentBackground == 0){
      currentBackground = 1;
      $("body").css("background-image", 'url("https://static.pexels.com/photos/7125/water-trees-lake.jpg")');
    }
    else if(currentBackground == 1){
      currentBackground = 2;
      $("body").css("background-image", 'url("https://static.pexels.com/photos/4243/black-and-white-forest-trees-branches.jpg")');
    }
    else if(currentBackground == 2){
      currentBackground = 0;  
      $("body").css("background-image", 'url("https://static.pexels.com/photos/9159/pexels-photo.jpg")');
    } 

    changeBackground();

  }, 6000);
}

The JSFiddle update

答案 1 :(得分:0)

我认为问题出在url标准

改为使用相对网址:

 changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == 'url("/images/new-home-page/woman.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');

            }
            else if(currentBackground == 'url("/images/new-home-page/slajd2.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');

            }
            else if(currentBackground == 'url("/images/new-home-page/slajd3.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman.png")');

            }

            changeBackground();

        }, 6000);
    }