Jquery 이미지가 연속 된 소스로 사라집니다

Question

이미지를 페이드 인으로 변경하는 데 거친 스크립트를 만들었으므로 이미지 풀에서 새 것을 가져 오는 동안 5 초마다 변경하고 싶습니다. 이 경우 나는 연속 이름을 가진 4 개 사진과 같습니다 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 밀리 초.
curImg 변수에서 우리는 이미지의 실제 숫자를 전역 적으로 저장 한 다음 과 함께 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); 
});