자바 스크립트 : Timed href change

Question

현재 약간의 자바 스크립트 문제가 있습니다. 아래 이미지에 시간 변경에 의해 트리거되는 변수 HREF가 있어야합니다.

현재 어느 정도 트리거되고 있지만 URL 중 하나에서 멈추고 있습니다. 이 이미지 위에 중첩되어있는 이미지에도 영향을줍니다. 어느 것이 목표가 아닌가!

도움이 될 것입니다. 감사.

<div style="position: absolute; left: 0; top: 0; z-index: 100"><a href="[VARIABLE  URL]"><img src="[BACKGROUNDIMAGE]" style="position: absolute top: 0; left: 0;"/></a></div> 

<script type="text/JavaScript"> 

setTimeout(hyperlink1,3000); 
setTimeout(hyperlink2,3000); 
setTimeout(hyperlink3,3000); 

function hyperlink1() { 
$("a").attr("href", "[URL1]") 
} 

function hyperlink2() { 
$("a").attr("href", "[URL2]") 
} 

function hyperlink3() { 
$("a").attr("href", "[URL3]") 
} 

</script> 

Answer 1

당신의 선택, "a"는 페이지의 모든 a 요소와 일치합니다. 즉, 세 함수가 모두 약 3 초 후에 실행되면 모든 링크가 동일한 URL로 변경됩니다.

각 선택기가 변경 될 링크에 고유해야합니다. 당신은 링크에 id들과 함께, 또는 등 자신의 (원본) href, 또는 class를 사용하여

은 또한 당신의 모든 기능 세 가지가 거의 정확히 같은 시간을 해고되고 있습니다 것을 할 수 있습니다. 그게 목표라면, 모든 기능을 수행하기 위해 하나의 함수를 사용하십시오.

setTimeout(hyperlink1,3000); 

function hyperlink1() { 
    $("a").attr("href", "[URL1]") 
    setTimeout(hyperlink2,3000); 
} 

function hyperlink2() { 
    $("a").attr("href", "[URL2]") 
    setTimeout(hyperlink3,3000); 
} 

function hyperlink3() { 
    $("a").attr("href", "[URL3]") 
} 

을 ... 또는 배열을 통해 산책을 하나의 기능을 사용 : 당신의 목표는 다음 중 하나 불을 가지고하는 경우는 다음, 다음, 다음, 하나는 그들을 체인. 실제 기능이 얼마나 복잡하고 반복적으로 하나의 링크 만 업데이트할지 또는 일련의 링크를 한 번에 하나씩 업데이트할지에 따라 다릅니다.

당신은 단지 하나 개의 링크를 가지고 있고, 당신은 당신이 단지 같은 배열 걸을 수도, 반복적으로 업데이트하려는 경우 :

function update() { 
    var index = 0, 
     urls = [ 
      "/path/to/first", 
      "/path/to/second", 
      "/path/to/third" 
     ]; 
    setTimeout(tick, 3000); 

    function tick() { 
     var href = urls[index++]; 
     if (href) { 
      $("a").attr("href", href); 
      if (index < urls.length) { 
       setTimeout(tick, 3000); 
      } 
     } 
    } 
} 
update(); 

을 ...하지만 경우 정말 그냥 세의 당신 나열된 글쎄, setTimeout을 통해 연결된 세 가지 기능은 간결하고 명확합니다. 간결하고 명확한 것은 좋은 것들입니다 ^(tm).

Answer 2

3 초 후에 한 URL을 다른 URL로 변경하고 싶습니다. 아래에서 시도하십시오.

var timer = setInterval(hyperlink,3000); 
var ptr = 0; 
var urls = ['URL1', 'URL2', 'URL3']; 

function hyperlink() { 
    if (ptr == url.length) { 
     clearInterval(timer); 
     ptr = 0; 
     return; 
    } 
    $("a").attr("href", urls[ptr++]) 
} 

Answer 3

모든 시간 초과가 같은 시간 (약 3 초) 후에 실행됩니다. 3 개의 URL 기능 중 하나를 "승리"로 설정합니다. 이는 시간 제한을 처리하고 기능을 실행하는 매우 짧은 시간 내에 세 가지 중 마지막 것으로 호출됩니다.
마지막 기능은 URL이 설정된 기능입니다. 하나의``요소가있다, 그래서 선택은 괜찮 - 페이지에 대한

<script type="text/JavaScript"> 
hyperlink(0); 
function hyperlink(urlCounter) { 
    if (urlCounter > 3) { 
     urlCounter = 0; 
    } 
    var url = ""; 
    switch (urlCounter) { 
     case 0: 
      url = "[URL 1]"; 
     break; 
     case 1: 
      url = "[URL 2]"; 
     break; 
     case 2: 
      url = "[URL 3]"; 
     break; 
    } 
    setTimeout(function() { 
     $("a").attr("href", url) 
     urlCounter++; 
     hyperlink(urlCounter); 
    }, 3000); 
} 
</script>