jquery改变图片答案

【问题标题】：jquery change imagesjquery改变图片
【发布时间】：2013-03-22 06:54:06
【问题描述】：

我有这个脚本：

<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”，然后到数组中的第一个图像，然后它就可以正常工作了（第一，第二，第三次和第一次……），

为什么会这样？

【问题讨论】：

“那么它工作得很好”是什么意思？请注意，当您在开始时递增时，您从数组中的第二个图像开始（编号从 0 开始）

标签： jquery arrays image

【解决方案1】：

我认为你应该这样做：

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);
});

// Increment the currentImage variable here, not in the begining...
currentImage++;

DEMO HERE

【讨论】：

【解决方案2】：

您正在使用数组的第二个索引，通过将索引变量增加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();

【讨论】：