使用Jquery（圆周运动）更改图像 [英] Change images using Jquery (Circular motion)

问题描述

Good day guys，

Good day guys,

我有一个这样的DOM

I've a DOM like this

<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）。

What I need is, If I click on img1, img2 is replaced with img1, and img3 is replaced with img2 and img1 is replaced with img3 (circular motion 1->2, 2->3, 3->1). and it continuous... and if I click on img3 then it's reverse (1<-2, 2<-3, 3<-1).

'使用JQuery如下：

for this I'm using JQuery as follows:

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

工作正常。现在，我需要的是，总是第二个图像应该替换为大图像而不是原始图像...例如：

It's working fine. now, What I need is, Always the 2nd image should be replace with large image instead of original image... say for example:

点击img1（ 1→2L ，2→3,3→3）。这里2L是img1的大图像。和
点击img3（1 <-2，2L <-3，3 <-1）。这里2L是img3的大图像

click on img1 (1->2L, 2->3, 3->1). here 2L is large image of img1. and click on img3 (1<-2, 2L<-3, 3<-1). here 2L is large image of img3

如何做到这一点，请帮助我

How to do this?, Please help me

推荐答案

这里需要的是使用双端队列数据结构，以便可以循环遍历这些图片。

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

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

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

下面是代码：

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

这篇关于使用Jquery（圆周运动）更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！