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&oacute;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&oacute;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&oacute;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或表单输入等。

从图像索引链接到幻灯片

1 个答案: