0

私は助けを求めている初心者です。私がやりたいことはこれです：

私のホームページには、それぞれ大きな画像を含む約 9 つのプロジェクトがリストされています。各プロジェクトには、他に約 5 つの未公開画像があります。

メイン画像をクリックして次の画像をその場所にロードし、同じページにとどまり、遷移を必要としない方法を理解しようとしています。横にテキスト リンクがあり、クリックすると「次」または「前」の画像も制御できます。

必要に応じて (最初の 9 枚を除いて) 画像をロードしたいので、最初から 50 枚の画像をロードするわけではありません。

また、同じページに 9 つの独立したギャラリー/スライドショーを作成しようとするのも頭痛の種でした。

現在、私は肥大化した乱雑な JavaScript を使用しており、それを一緒にハックして実行していますが、ブラウザー間で不安定であり、不要なコードがたくさんあるように感じます。わざわざ投稿するつもりはないので、ゼロから始める必要があると思います。

これは比較的単純なはずですが、この単純なタスクを実行するプラグインや例はどこにも見つかりません。

私は完全なアマチュアですが、実際にコーディングする方法を学びたいと思っているので、誰かが私を助けることができるチュートリアルを知っていれば、本当に感謝しています! 私は単純なjQueryであるべきだと頭の中で思っていますが、それを行う方法が正確にはわかりません。

助けてくれてありがとう！

4

1 に答える 1

0

車輪の再発明が必要な場合は、骨の折れる簡単な例を次に示します。

http://jsfiddle.net/KDnPX/

HTML:

<img src="">
    <a href="#" class="prevImg">Previous</a>
    <a href="#" class="nextImg">Next</a>

Jクエリ:

var json = '{"0":"http://mw2.google.com/mw-panoramio/photos/medium/14748463.jpg", 
"1":"http://mw2.google.com/mw-panoramio/photos/medium/3840183.jpg", 
"2":"http://mw2.google.com/mw-panoramio/photos/medium/25214140.jpg"}';

var images = jQuery.parseJSON(json);

// load first image
$('img').attr('src', images[0]);

var currImg = 0;

$('.prevImg').click(function (){
    if (currImg - 1 >= 0)
    {
        // show previous image
        $('img').attr('src', images[currImg - 1]);
        currImg--;
    }
    return false;
});

$('.nextImg').click(function (){
    if (currImg + 1 < Object.keys(images).length)
    {
        // show previous image
        $('img').attr('src', images[currImg + 1]);
        currImg++;
    }
    return false;
});
于 2013-04-26T18:30:33.017 に答える