Изображение JQuery исчезает с последовательными источниками

Question

Я сделал грубый сценарий, чтобы изменить изображение с постепенным исчезновением fadein, я хочу менять его каждые 5 секунд, беря новый из пула изображений. В этом случае у меня есть 4 JPEGs с последовательными именами: dish1 dish2 dish3 dish4, но это приводит к PageLoad и никаких изменений на изображении:

$(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 miliseconds.
В переменной 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); 
});