使用Jquery更换图片（圆形动画）

Question

大家好，

我有一个 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);
    });

一切正常。现在，我需要的是，始终用大图代替第二张图片，而不是原始图片... 例如:

点击img1 (1->2L, 2->3, 3->1)。 这里2L是img1的大图像。 并且 点击img3 (1<-2, 2L<-3, 3<-1)。 这里2L是img3的大图。

如何实现？请帮忙。

- Haavali

---

你不能直接调用2L图像吗？它的大小与逻辑无关，特别是如果需要双向使用。 - Dave Loepr

你能创建一个 Fiddle 吗？ - Aatish Molasi

@jonBreizh 嗯，我试过了。问题是，如果我第二次点击img1，img2的src将被设置为img3的src，因此，img3的src将获取那个较大的图像而不是原始图像。 - Haavali

@AatishMolasi http://jsfiddle.net/6HHkT/ - Haavali

你能用图示方式解释一下你想要实现什么吗？我猜测你可能缺少一个函数。 - Dave Loepr

Answer 1

这里需要使用双端队列数据结构，以便可以循环浏览图片。

这是一个工作演示 - 如果您给我大图像的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());
});

- jfrej

Answer 2

我相信您想要一个带有高分辨率中间图片的画廊。

我查看了您获取照片的flickr，规则似乎是：

• 大图：http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_b.jpg
• 小图：http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_t.jpg

所以它们只在_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/ 唯一的问题似乎是其中一个示例图片似乎不在高分辨率中。

- Peter Butkovic

Answer 3

您可以为每个图像使用更大的图像，例如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'));
    });

- Unknown Coder