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-＆gt; 2L ，2-> 3,3-> 1）。这里2L是img1的大图。和点击img3（1 <-2,2L＆lt; -3,3＆lt; -1）。这里2L是img3的大图像

怎么做？请帮帮我

Answer 1

这里需要的是使用双端队列数据结构，以便循环显示图像。

这是a working demo - 如果你给我一些大图片的网址，我可以按照你的描述使其正常工作。

这是代码：

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());
});

稍微重构的版本here。

修改

这里是a version with big images.

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()); });

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 - ＆gt; 300

jsfille链接：http://jsfiddle.net/dx3DY/

似乎只有一个样本照片似乎没有高分辨率。

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'));
    });

使用Jquery（圆周运动）更改图像

3 个答案: