1

2 つのパズル。

サムネイルの画像インデックスがあり、サムネイルが表す画像に関連付けられたスライド番号で、特定の各サムネイルから大きな画像のスライドショーにリンクしたいと思います。

スライド ショーはうまく機能し、各スライドのキャプションが表示されますが、スライド ショーの外部からシーケンス内の特定のスライドにリンクする方法がわかりません。

そして 2 番目のパズル: 現在書かれているように、スライドショーは 1 から何でも直線的にしか実行できず、どの画像が表示されても、スライドショーはキャプション 1 から始まるかのようにキャプションを関連付けます。そのため、さまざまな html ドキュメントを作成して、それぞれが必要な画像でスライド ショーを開始することもできません。そのため、退屈ではありますが、任意のサムネイルからスライド ショーにリンクして、その画像でスライド ショーを開始することができます。しかし、キャプションとスライドは一致しているので、どちらも機能しません。slide0 以外の画像を配置すると、表示されるキャプションは常に、slide0 に関連付けられたキャプションになります。そして、シーケンスの最初の画像以外の画像で id=slideshow を開始し、順方向に移動すると、開始した画像の番号に関係なく、画像 2 が表示されます。

スライドショーのスクリプトは次のとおりです。

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];
}

私はプログラマーではありません。それはおそらく明らかです。提供されたスクリプトを適応させます。

ご協力ありがとうございます。

4

1 に答える 1

0

あなたの問題の鍵は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 やフォーム入力などを使用して、必要に応じて変更するだけです。

于 2013-10-25T06:39:44.663 に答える