이미지 슬라이더 - 자바 스크립트

Question

누구나이 코드가 1.fw.png에서 5.fw.png까지 내 이미지를 변경하지 않는 이유를 알 수 있습니까? HTML

<div id="slideshow"> 
<img id="slider" src="1.fw.png"> 
</div> 

자바 스크립트

function timer(x){ 
var timer = setTimeout(function() {switchPic(x);}, 4000); 
} 

function switchPic(x){ 
x += 1; 
document.getElementById('slider').src = x + ".fw.png"; 
} 

$(document).ready()(function(){ 
document.getElementById('slider').src = x; 
timer(x); 
}); 

전환이있는 이미지 체인저

는 도움이 될,하지만 단지 이미지를 변경하는 것은 필수 요구 사항입니다 것입니다.

Answer 1

x은 로컬 변수 (매개 변수)이므로 증분 변경 내용은 switchPic 함수 이후에 살지 않습니다. 글로벌 x이있는 경우에는 음영 처리됩니다. 그렇지 않은 경우 timer(x)은 ReferenceError가 될 것입니다. 은 무엇이 "작동하지 않는 것입니까?"및 how 등이 알려져 있는지 확인하십시오. 나는 당신의 정보를 사용하여 코드를 다시 작성,

jQuery(function ($) { 
    var t = -1;    // initial value peicked so x is 1 at first interval 
    function switchIt() { 
     t++;     // change variable caught in closure 
     var x = (t % 5) + 1; // loops through values in 1..5 
     $('#slider').attr("src", x + ".fw.png"); 
    } 
    // set initial image right away 
    switchIt(); 
    // switch image every 4 seconds, forever 
    setInterval(switchIt, 4000); 
}); 

Answer 2

당신이 user2864740 감사 지금은 너무 올바른 번호로 루프 :

그래서처럼 쓸 수 있습니다.

$(document).ready(function(){ 
    setInterval(function(){ 

     z = document.getElementById('slider').src; 
     y = z.indexOf(".fw.png"); 
     y = z.slice(y - 1, -7); 
     x = parseInt(y); 
     y = (x % 5) + 1; 
     document.getElementById('slider').src = "/Images/Index/Slider/" + y + ".fw.png"; 

    },4000); 
});