鏈接從圖像索引到幻燈片

Question

兩個謎題。

我有一個縮略圖的圖像索引，我想從每個特定的縮略圖鏈接到較大圖像的幻燈片，在與縮略圖所代表的圖像相關的幻燈片編號上。

幻燈片放映效果很好，並顯示每張幻燈片的標題，但我不知道如何從幻燈片外部鏈接到序列中的特定幻燈片。

第二個難題：就像現在寫的那樣，幻燈片只能從1到任意線性運行，並將字幕關聯起來，就像不管顯示什麼圖像一樣，幻燈片從標題1開始。所以我也無法制作無數不同的html文檔，每次都要在我想要的圖像上開始幻燈片放映，這樣雖然很乏味，但我可以從任何縮略圖鏈接到幻燈片，在該圖像上開始幻燈片放映。但是字幕和幻燈片是匹配的，所以也不起作用 - 如果除了slide0之外還放置其他任何圖像，顯示的標題仍然是，並且始終是與slide0關聯的標題。如果我使用序列中第一個以外的任何圖像開始進行id =幻燈片演示，並向前導航，則無論開始使用的是多少個圖像，都會得到圖像2，並且轉到上一個圖像將始終讓我看到最後一個圖像在幻燈片放映中，無論通過html顯示哪個幻燈片號碼。

這裏是幻燈片腳本：

window.onload = initAll; 

var currImg = 0; 
var captionText = new Array(
"Wrangler, Darhat Valley, Mongolia", 
"Graveyard, Camden, Maine", 
"Pants, Inis Mór", 
"Campfire Lake, Crazy Mountains, Montana", 
"Campsite, Darhat Valley", 
"Crazy Mountains, Montana", 
"Cuddy, Bedlam", 
"The River Styx", 
"Fountain, Cambridge", 
"Freezeout Lake, Spring Equinox 1", 
"Freezeout Lake, Spring Equinox 2", 
"Freezeout Lake, Spring Equinox 3", 
"G. I. Joe, Darhat Valley", 
"Girls in Red, Renchilumbe, Mongolia", 
"After spring rains, Montana", 
"Lake Helena, Montana", 
"Kapiti Coast, New Zealand", 
"Lucky Star Bar, Inis Mór", 
"On Ponsonby, Auckland", 
"Holding Reservoir, Montana", 
"Ferry, Darhat Valley", 
"Baja", 
"Saridag Inn, Renchilumbe", 
"Skyscapes", 
"Stanley Lane, Vermont", 
"Bear Gulch, Montana", 
"On the train between Brussels and Paris", 
"Great blue heron", 
"Tree, Tulla", 
"Waves, Dun Aengus", 
"Two ladies", 
"Walls, Inis Mór", 
"Wave, Dun Aengus", 
"Storm light, Northampton" 
) 

function initAll() { 
document.getElementById("imgText").innerHTML = captionText[0]; 
document.getElementById("prevLink").onclick = processPrevious; 
document.getElementById("nextLink").onclick = processNext; 
} 

function processPrevious() { 
newSlide(-1); 
} 

function processNext() { 
newSlide(1); 
} 

function newSlide(direction) { 
var imgCt = captionText.length; 

currImg = currImg + direction; 
if (currImg < 0) { 
    currImg = imgCt-1; 
} 
if (currImg == imgCt) { 
    currImg = 0; 
} 
document.getElementById("slideshow").src = "slides/slides" + currImg + ".png"; 
document.getElementById("imgText").innerHTML = captionText[currImg]; 
} 

我不是一個程序員，這可能是顯而易見的。我修改了提供的腳本。

感謝您的協助。

Answer 1

我認爲你問題的關鍵在於newSlide(direction)這一行。如果你修改了這個函數接受的圖像數量，而不是一個方向，你可以把它當您需要：

// Since this function handles backwards movement, keep all backwards-moving 
// logic contained inside of it. Same for forward movement. 
function prev() { 
    currImg = currImg - 1; 

    // This should be called from the wherever prev() is called from, 
    // but for the sake of the example I'll include it here. 
    show(); 
} 

function next() { 
    currImg = currImg + 1; 

    // ...see above... 
    show(); 
} 

// Make sure the currImg is valid here, whenever you need to. 
function check() { 
    if (currImg >= captionText.length) { 
     currImg = 0; 
    } 

    if (currImg < 0) { 
     currImg = captionText.length - 1; 
    } 
} 

// Now, this function shows whatever slide, whatever caption. 
function show() { 
    check(); 
    document.getElementById("slideshow").src = "slides/slides" + currImg + ".png"; 
    document.getElementById("imgText").innerHTML = captionText[currImg]; 
} 


function initAll() { 
    document.getElementById("imgText").innerHTML = captionText[0]; 
    document.getElementById("prevLink").onclick = processPrevious; 
    document.getElementById("nextLink").onclick = processNext; 

    // You can set the image you want during init, or update it in 
    // a different function and show() again. 
    currImg = 0; 
    show(); 
}; 

要將圖像設置爲任何你想要的，你可以修改currImg根據需要，使用GET或表單輸入或其他東西。