2012-04-02 107 views
-1

當前有輕微的Javascript問題,我希望下面的圖像具有由時間變化觸發的變量HREF。Javascript:Timed href change

目前它在某種程度上被觸發,但後來被卡在其中一個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> 

回答

6

你的選擇,"a",將匹配頁面上的所有a元素。這意味着所有這三個函數都會在大約三秒鐘後觸發,並將所有鏈接都更改爲相同的URL。

您需要讓每個選擇器針對它將要改變的鏈接。你可以做到這一點與id S於鏈接,或者通過他們的(原)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)

0

你所有的超時火的同時(約三秒鐘)後。這使得你的三個URL中的一個功能「贏」,因爲它將在處理超時和運行你的功能的很短時間內被稱爲三個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>