jquery改变图像

Question

我有这个脚本:

<script>
var images = [
    "webit.png",
    "analog.png",
    "projectica.png"
];

currentImage = 0;

function ChangeImage()
{
    currentImage++;

    if (currentImage > images.length - 1)
        currentImage = 0;
    $("#screenBackImage").css("background-image", "url(images/works/" + images[currentImage] + ")");

    $("#screenImage").fadeOut(500, function() {
        $("#screenImage").attr("src", "images/works/" + images[currentImage]);
        $("#screenImage").fadeIn(500);
    });
    setTimeout(function() {
        ChangeImage();
    }, 5000);
}

ChangeImage();
</script>

当图像第一次更改时，它会跳过图像数组中的第二个图像，跳转到“projectica.png”，然后跳转到数组中的第一个图像，然后就可以正常工作了(第一，第二，第三次，再次第一..)，

为什么会发生这种情况？

Answer 1

您通过将索引变量增加 currentImage++ 来使用数组的第二个索引； 将 currentImage 初始化为 -1 将解决您的第一次问题，您将通过 currentImage++;

获取零索引( 第一个元素)

更改

currentImage = 0;

至

currentImage = -1;

你的代码是

var images = [
    "webit.png",
    "analog.png",
    "projectica.png"
];

currentImage = -1;

function ChangeImage()
{
    currentImage++;

    if (currentImage > images.length - 1)
        currentImage = 0;
    $("#screenBackImage").css("background-image", "url(images/works/" + images[currentImage] + ")");

    $("#screenImage").fadeOut(500, function() {
        $("#screenImage").attr("src", "images/works/" + images[currentImage]);
        $("#screenImage").fadeIn(500);
    });
    setTimeout(function() {
        ChangeImage();
    }, 5000);
}

ChangeImage();