使用顺序源的Jquery图像淡入淡出

我制作了一个粗略的脚本，用fadein淡出来更改图像，我想在从图像池中获取新图像时每5秒更改一次。 在本例中，我有4个连续名称的JPEG:

dish1 dish2 dish3 dish4

，但它会导致页面加载，并且不会更改图像：

$(document).ready(function(){    
  function chngImg(curImg=1,imgNum=4){
    var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
    $('#picture').fadeOut("slow");
    $('#picture').attr('src', src);
    $('#picture').fadeIn("slow");
    curImg++;
    if (curImg>imgNum){
      curImg=1;
    } //end if
    setTimeout('chngImg(curImg, imgNum);', 5000);
  } // end chngimg
}); //endready

任何帮助都会很有用，我是jQuery新手。

试试这个：

setTimeout(function() { chngImg(curImg, imgNum) }, 5000);

---

脚本中存在多个问题，请重试

$(document).ready(function () {
    var curImg = 1,
        imgNum = 4;

    //method signature does not allow default values
    function chngImg() {
        var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
        //change source after the image is hidden
        $('#picture').fadeOut("slow", function () {
            $(this).attr('src', src).fadeIn("slow", function () {
                //again schdule next iteration using setTimeout()
                setTimeout(chngImg, 5000)
            });
        });
        curImg++;
        if (curImg > imgNum) {
            curImg = 1;
        } //end if 
    } // end chngimg 
    //initialize the loop
    chngImg();
}); //endready

---

问题是当您在

setTimeout

函数中传递函数名时，函数必须是公共的，但在您的代码中，函数

chngImg

在

$（文档）中声明。ready

。这是本地函数，这就是代码无法运行的原因。并且不能设置参数的默认值

你的代码应该是

function chngImg(curImg, imgNum) {
    if (!curImg) {
        curImg = 1;
    }

    if (!imgNum) {
        imgNum = 4;
    }

    var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
    $('#picture').fadeOut("slow");
    $('#picture').attr('src', src);
    $('#picture').fadeIn("slow");
    curImg++;
    if (curImg > imgNum) {
        curImg = 1;
    } //end if
    setTimeout('chngImg(curImg, imgNum);', 5000);
}

$(document).ready(function() {
    chngImg();
});

或者您可以将回调传递给

setTimeout

，如下所示：

$(document).ready(function() {
    function chngImg(curImg, imgNum) {
        if (!curImg) {
            curImg = 1;
        }

        if (!imgNum) {
            imgNum = 4;
        }

        var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
        $('#picture').fadeOut("slow");
        $('#picture').attr('src', src);
        $('#picture').fadeIn("slow");
        curImg++;
        if (curImg > imgNum) {
            curImg = 1;
        } //end if

        setTimeout(function() {
            chngImg(curImg, imgNum);
        }, 5000);
    }

    chngImg();
});

更好的方法是使用，它将每隔

延迟

毫秒调用您的函数。
在

curImg

变量中，我们全局存储图像的实际数量，然后使用

setInterval（）

调用

chngImg（）

函数，该函数将每5秒执行一次。

chngImg（）

函数与您的函数相同

$(document).ready(function () {    
    var curImg = 1;
    setInterval(function chngImg(imgNum) {
        var src = "immagini/dishes_pizze/dish" + curImg + ".jpg";
        $('#picture').fadeOut("slow");
        $('#picture').attr('src', src);
        $('#picture').fadeIn("slow");
        ++curImg;
        if (curImg > imgNum) {
            curImg = 1;
        }
    }, 5000);
});

---

感谢您的帮助，我尝试了两种代码，第二种代码工作得很好，但仍然存在一个问题，在淡出完成之前图像会发生变化，因此您实际看到的图像会发生变化，您不应该看到。我在这里编辑了不断变化的图像代码，如@arun:$（'#picture'）.fadeOut（“slow”，function（）{$（this.attr（'src'，src.fadeIn（“slow”））所示；这样就行了