jQuery當圖像滑塊變化時更改href

我有一個工作圖像滑塊，它使用jQuery來更改圖像（是的，我知道在DIV中使用背景圖像不是最佳做法，但它是唯一可與其餘部分我的頁面）：jQuery當圖像滑塊變化時更改href

我的HTML：

<a id="featuredLink" href="#"><div class="featuredImages" style="background-image:url('http://www.placehold.it/2000x500/00ff00.png')"><div class="slide"></div></div></a>

的jQuery：

var urls = [ 'http://www.google.com','http://www.microsoft.com','http://www.yahoo.com' ]; 
var images = [ 'http://www.placehold.it/2000x500/ff0000.png','http://www.placehold.it/2000x500/00ff00.png','http://www.placehold.it/2000x500/0000ff.png' ]; 
var cur_image = 0; 
function changeBackground() { 
    cur_image++; 
    if (cur_image >= images.length) 
     cur_image = 0; 

    // change images 
    $('.featuredImages').css({ 
     backgroundImage: 'url(' + images[ cur_image ] + ')' 
    }); 
    $('.featuredImages .slide').fadeOut(3000, function(){ 
     $(this).css({ 
      backgroundImage: 'url(' + images[ cur_image ] + ')' 
     }).show(); 
    }); 

} 


setInterval(changeBackground, 10000);

和CSS：

.featuredImages { 
    position:absolute; 
    margin: 0; 
    height: 500px; 
    width: 100%; 
    background: transparent url('') no-repeat center; 
    overflow: hidden; 
} 
.featuredImages .slide { 
    position: absolute; 
    margin: 0; 
    height: 500px; 
    width: 100%; 
    background: transparent url('') no-repeat center; 
    overflow: hidden; 
}

http://jsfiddle.net/hnS9U/1/

我想改變這種錨標記的href（「featuredLinks」）時，圖像交換，這樣它鏈接到該圖像涉及頁面。

我想使用數組來存儲鏈接（「url」）和用於圖像的相同循環計數器，以跟蹤要使用的鏈接。

任何指向正確方向的指針都會很棒！

在此先感謝！

來源

2013-04-12 block14

基本上，href s不過是a元素的屬性。您只需更改該屬性的值即可。至於數組，如果您打算使用兩個數組，並且您計劃使每個數組的索引與另一個數組中的對應索引相對應，那麼對於href，您也可以使用相同索引器cur_image。

你試過：

$("#featuredLink").attr("href", "hrefOfNewImage");

在你的情況，這將是更喜歡：

$("#featuredLink").attr("href", urls[cur_image]);

在你的功能，這將是這樣的：

function changeBackground() { 
    cur_image++; 
    if (cur_image >= images.length) 
     cur_image = 0; 

    // change link 
    $("#featuredLink").attr("href", urls[cur_image]); 

    // change images 
    $('.featuredImages').css({ 
     backgroundImage: 'url(' + images[ cur_image ] + ')' 
    }); 
    $('.featuredImages .slide').fadeOut(3000, function(){ 
     $(this).css({ 
      backgroundImage: 'url(' + images[ cur_image ] + ')' 
     }).show(); 
    }); 

};

如果您還有其他問題，請告訴我。祝你好運！ :)

來源

2013-04-12 15:45:16

感謝您的快速回答，但我很新的JS。你介意告訴我如何將此代碼添加到我提供的代碼中嗎？謝謝！ – block14

完成！如果你的其他代碼正在工作，那麼它應該馬上工作。 –

非常感謝！這很好！如果光標已經在圖像上，則光標離開圖像並重新放置後，href不會改變。這是瀏覽器的原因還是可以通過jQuery糾正的原因？例如：http：// jsfiddle。net/hnS9U/2/ – block14

您可以changeBackground（）添加以下代碼：

$('#featuredLink').attr("href", urls[cur_image]);

我用cur_image，但你可以創建另一個變種！

您的HTML語義嚴重不好壞...鏈接中的div不是語義上的，請嘗試更改爲span。

來源

2013-04-12 15:52:40

jQuery當圖像滑塊變化時更改href

回答

相關問題