5

皆さん、こんにちは。

私はこのようなDOMを持っています

<div class="Gallery">
  <div class="GaleryLeftPanel">
     <img id="img1" src="/Content/Public/images/1.png" style="z-index: 100" width="141"
                            height="140" alt="image 1" /></div>
   <div class="GalleryMiddlePanel">
      <img id="img2" src="/Content/Public/images/3.png" style="z-index: 99" width="715"
                            height="497" alt="image 2" /></div>
   <div class="GaleryRightPanel">
      <img id="img3" src="/Content/Public/images/2.png" style="z-index: 98" width="140"
                            height="140" alt="image 2" /></div>
 </div>

必要なのは、 img1 をクリックすると、 img2が img1 に置き換えられ、 img3 が img2 に置き換えられ、img1 が img3に置き換えられます(円運動 1->2、2->3、3->1) 。そしてそれは連続しています...そしてimg3をクリックすると逆になります（1 <-2、2 <-3、3 <-1）。

このために、次のように JQuery を使用しています。

$('img#img1').click(function () {
        var currentScr = $(this).attr('src');
        var second = $('img#img2').attr('src');
        var third = $('img#img3').attr('src');

        $('img#img3').attr('src', second);
        $('img#img2').attr('src', currentScr);
        $('img#img1').attr('src', third);
    });

    $('img#img3').click(function () {
        var third = $(this).attr('src');
        var first = $('img#img1').attr('src');
        var second = $('img#img2').attr('src');

        $('img#img2').attr('src', third);
        $('img#img3').attr('src', first);
        $('img#img1').attr('src', second);
    });

それはうまくいっています。今、私が必要としているのは、常に2番目の画像を元の画像ではなく大きな画像に置き換える必要があるということです...たとえば、次のように言います。

img1 をクリックします ( 1->2L、2->3、3->1)。ここで 2L は img1 の大きな画像です。img3 (1<-2, 2L<-3, 3<-1) をクリックします。ここで 2L は img3 の大きな画像です

これを行う方法?, 助けてください

4

3 に答える 3

2

ここで必要なのは、両端キューのデータ構造を使用して、画像をループできるようにすることです。

これが機能するデモです。大きな画像へのURLを教えていただければ、説明どおりに機能させることができます。

そしてここにコードがあります：

var imgs = new Array();
imgs[0] = 'http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_t.jpg';
imgs[1] = 'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_t.jpg';
imgs[2] = 'http://farm1.staticflickr.com/178/460793430_1c0a085849_t.jpg';

$('#img1').click(function () {
        $('#img1').attr('src', imgs[2]);
        $('#img2').attr('src', imgs[0]); // - Do something here to use a larger version of the image
        $('#img3').attr('src', imgs[1]);
        imgs.unshift(imgs.pop());
    });

    $('#img3').click(function () {
        $('#img1').attr('src', imgs[1]);
        $('#img2').attr('src', imgs[2]); // - Do something here to use a larger version of the image
        $('#img3').attr('src', imgs[0]);
        imgs.push(imgs.shift());
});

そして、ここで少しリファクタリングされたバージョン。

編集：

そして、これが大きな画像のバージョンです。

var imgs = new Array();
imgs[0] = {small: 'http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_t.jpg',
           big: 'http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_b.jpg'};
imgs[1] = {small: 'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_t.jpg',
           big: 'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_b.jpg'};
imgs[2] = {small: 'http://farm9.staticflickr.com/8201/8219867682_7c9aea748f_t.jpg',
           big: 'http://farm9.staticflickr.com/8201/8219867682_7c9aea748f_b.jpg'};

var $img1 = $('#img1');
var $img2 = $('#img2');
var $img3 = $('#img3');

$img1.click(function () {
    $img1.attr('src', imgs[2].small);
    $img2.attr('src', imgs[0].big);
    $img3.attr('src', imgs[1].small);
    imgs.unshift(imgs.pop());
});

$img3.click(function () {
    $img1.attr('src', imgs[1].small);
    $img2.attr('src', imgs[2].big);
    $img3.attr('src', imgs[0].small);
    imgs.push(imgs.shift());
});
于 2012-11-26T12:12:52.123 に答える
1

高解像度で真ん中の写真のギャラリーを作ろうとしていると思います。

あなたが写真を撮ったところからflickrをチェックしましたが、ルールは次のようです：

そのため、_t/_bのみが異なります。

それを実装するために、js 部分を次のように更新しました。

$(document).ready(function() {
    var second = $('img#img2').attr('src');
    $('img#img2').attr('src', swap(second));   
});

function swap(img) {   
    if (img.indexOf("_b.") !== -1) {
    return img.replace("_b.", "_t.");
    } else {
    return img.replace("_t.", "_b.");
    }    
}

$('img#img1').click(function () {
    var currentScr = $(this).attr('src');
    var second = $('img#img2').attr('src');
    var third = $('img#img3').attr('src');

    $('img#img3').attr('src', swap(second));
    $('img#img2').attr('src', swap(currentScr));
    $('img#img1').attr('src', third);
    });

    $('img#img3').click(function () {
    var third = $(this).attr('src');
    var first = $('img#img1').attr('src');
    var second = $('img#img2').attr('src');

    $('img#img2').attr('src', swap(third));
    $('img#img3').attr('src', first);
    $('img#img1').attr('src', swap(second));
});

さらに (解像度の変更を確認するために、写真を少し大きくしました): 140/141 -> 300

jsfille リンク: http://jsfiddle.net/dx3DY/

唯一のことは、サンプル写真の 1 つが高解像度ではないように思われることです。

于 2012-11-26T12:23:36.657 に答える
1

次のように、各画像の大きな画像を表示して1L.png, 2L.png, 3L.png、スクリプトを変更できます。

$('img#img1').click(function () {
        var currentScr = $(this).attr('src');
        var second = $('img#img2').attr('src');
        var third = $('img#img3').attr('src');

        $('img#img3').attr('src', second.replace('1L', '1').replace('2L', '2').replace('3L', '3'));
        $('img#img2').attr('src', currentScr.replace('1', '1L').replace('2', '2L').replace('3', '3L'));
        $('img#img1').attr('src', third);
    });

    $('img#img3').click(function () {
        var third = $(this).attr('src');
        var first = $('img#img1').attr('src');
        var second = $('img#img2').attr('src');

        $('img#img2').attr('src', third.replace('1', '1L').replace('2', '2L').replace('3', '3L'));
        $('img#img3').attr('src', first);
        $('img#img1').attr('src', second.replace('1L', '1').replace('2L', '2').replace('3L', '3'));
    });
于 2012-11-26T13:01:59.570 に答える