Question

我正在尝试使用多个背景图像并使用background-position属性为它们制作动画的幻灯片。这是代码：

HTML：

<div class="slide_holder" id="slide_holder"></div>

CSS：

.slide_holder {
    float: left;
    width: 1440px;
    height: 720px;
    background-image: url("images/gc-h-s-01.jpg"), url("images/gc-h-s-02.jpg"), url("images/gc-h-s-03.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px, 1440px, 2880px;
    transition: 1s;
}

JS：

var imageIndex = 1;
var x;

var PosValues = ["0px, 1440px, 2880px", "-1440px, 0px, 1440px", "-2880px, -1440px, 0px"]

startSlides();

function startSlides() {
    x = setInterval(IncAndWrite, 1000);
}

function IncAndWrite() {
    var i;
    document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex];
    imageIndex++;
    if (imageIndex > 2) {imageIndex = 0;}
}

概念是每个背景图像的背景位置值每1秒更改一次，从而在可见帧中仅保留一个图像。上面提到的代码可以正常工作，但是我不想为不同的屏幕尺寸编写单独的位置值（因为我的网站具有响应能力）。所以我写了下面的代码： JS：

var imageIndex = 1;
var x;
var UnitRes = 1440;

var PosValues = [
    UnitRes*0 + "px, " + UnitRes*1 + "px, " + UnitRes*2 + "px;",
    UnitRes*(-1) + "px, " + UnitRes*0 + "px, " + UnitRes*1 + "px;",
    UnitRes*(-2) + "px, " + UnitRes*(-1) + "px, " + UnitRes*0 + "px;"]

startSlides();

function startSlides() {
    x = setInterval(IncAndWrite, 1000);
}

function IncAndWrite() {
    var i;
    document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex];
    imageIndex++;
    if (imageIndex > 2) {imageIndex = 0;}
}

基本概念是将容器的宽度放入UnitRes中，然后计算出值。但这似乎不起作用。背景位置值完全不变。

我认为是造成此问题的原因：在第二种js代码中，我将一个变量值放入一个数组中，我认为在使用CSS语法输入该数组时不会将其转换为字符串类型。

我尝试做的事情：我使用了typeof，但它显示的类型为string 然后我尝试使用：

document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex].valueOf();

但仍然无法正常工作。我还使用了alert(PosValues[imageIndex]);来检查值是否正确以及它们是否正确。

请帮助我。

Answer 1

问题在于，第一次您定义的参数没有分号;，而在第二个示例中，您放置的参数使脚本无法使用。

JavaScript不会将数组值放入CSS语法中

1 个答案: