目標圖像直接在jQuery的幻燈片

我愛的方式這個腳本工作：http://demo.marcofolio.net/bgimg_slideshow/目標圖像直接在jQuery的幻燈片

不過，我想知道，有沒有向目標直接在幻燈片每幅圖像的方式？

所以，我可以點擊一個超鏈接，說'圖片3'，它會加載一個圖片 - 而不是使用當前的導航按鈕。

這是腳本本身：http://demo.marcofolio.net/bgimg_slideshow/js/script.js，但我只需要知道如何直接在我的HTML中定位每個圖像。

任何人都可以幫助我嗎？

非常感謝！

來源

2012-10-29 michaelmcgurk

每個

圖像沒有在幻燈片加載同時 - 相反，有顯示各圖像的單個元素，和幻燈片的工作原理，通過改變該圖像的源。

但是，如果你只是想創建一個鏈接來自動加載某個圖像，你應該能夠解決這個問題。圖像數據存儲在名爲「photos」的數組中，所以您應該能夠創建一個觸發加載給定照片的按鈕。該腳本使用一個函數「導航」來前後移動，所以你需要做的是修改它以允許加載任意照片。

像這樣的事情

var navigate_to = function(image_number) { 
    if(animating) {  
    return;  
    } 
    currentImg = image_number; 

    var currentContainer = activeContainer; 
    if(activeContainer == 1) { 
    activeContainer = 2; 
    } else { 
    activeContainer = 1; 
    } 
    showImage(photos[currentImg - 1], currentContainer, activeContainer); 
};

應該工作，但我沒有測試它 - 你可能需要按摩的指標有點爲它完美地工作。然後，你需要做的就是創建一個鏈接，用它所指向的索引來調用這個函數。

要在這最後一點更具體的，你可以創建一個這樣的元素 -

<div class="navigator">1</div>

然後添加以下代碼 -

$(".navigator").on("click", function() { 
    navigate_to(parseInt($(this).html(), 10)); 
});

沒有必要專門建立一個超鏈接，因爲這是頁內導航。這將做的是，如果點擊了類爲「navigator」的元素，元素中的值將被髮送到「navigate_to」。只要你將整數放入導航元素中，這應該工作得很好。

來源

2012-10-29 19:53:50 Bubbles

謝謝你，泡泡。你能解釋我如何使用這個HTML超鏈接？ – michaelmcgurk

我已經擴展了我的答案，希望這足以讓您爲您工作。 – Bubbles

很多很多非常感謝泡沫。我現在就試試看，並且會讓你知道我是怎麼得到的:-D – michaelmcgurk

您應該可以使用showImage（）函數更改圖像。

showImage(photoObject, currentContainer, activeContainer)

來源

2012-10-29 19:44:51

嗨烤。非常感謝您的回覆。你可以告訴我這是怎麼用一個例子嗎？我對JS不太熱。真的很感激:) – michaelmcgurk

目標圖像直接在jQuery的幻燈片

回答

相關問題