Live Demo

Question

我制作了一个粗略的脚本来改变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的新手。

Answer 1

问题是当您在setTimeout函数中传递函数名称时，该函数必须是公共的，但在您的代码中，函数chngImg在$(document).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();
});

Answer 2

试试这个：

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

Answer 3

您的脚本中存在多个问题，请尝试

$(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

Answer 4

Live Demo

更好的方法是使用setInterval(func, delay)，它会在delay毫秒内调用您的函数。
在curImg变量中，我们全局存储图像的实际数量，然后我们将chngImg()函数调用setInterval()，每隔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); });功能与您的功能相同。

{{1}}

Jquery图像随顺序源淡出

4 个答案:

Live Demo