使用Jquery（圆周运动）更改图像-ChangeimagesusingJquery(Circularmotion)

2  

What you need here is to use a double ended queue data structure so you can loop through the images.

这里你需要的是使用双端队列数据结构，这样你就可以遍历图像。

Here's a working demo - if you give me URLs to the big images I can make it work as you described.

这是一个有效的演示 - 如果你给我大图像的URL，我可以按照你的描述使它工作。

And here's the code:

这是代码：

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

And a slightly refactored version here.

这里有一个稍微重构的版本。

EDIT:

编辑：

And here's 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());
});

1  

I believe you're trying to have gallery with middle picture in the high resolution.

我相信你正试图在高分辨率下使用中间画面。

I checked the flickr from where you took pics, and the rule seems:

我检查了你从哪里拍摄照片的flickr，规则似乎：

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

so they differ in _t / _b only.

所以他们只有_t / _b不同。

To implement it I updated your js part like this:

为了实现它，我更新了你的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));
});

Moreover (to see resolution change I made pics a bit bigger): 140/141 -> 300

此外（为了看到分辨率变化，我的照片有点大）：140/141 - > 300

jsfille link: http://jsfiddle.net/dx3DY/

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

Only thing seems to be that one of the sample pics doesn't seem to be in the high resolution.

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

1  

You can have the larger images for each image say 1L.png, 2L.png, 3L.png and change your script as follows:

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