使用 Jquery(圆周运动)更改图像 [英] Change images using Jquery (Circular motion)
问题描述
大家好,
我有一个这样的 DOM
<div class="GaleryLeftPanel"><img id="img1" src="/Content/Public/images/1.png" style="z-index: 100" width="141"height="140" alt="图像 1"/></div><div class="GalleryMiddlePanel"><img id="img2" src="/Content/Public/images/3.png" style="z-index: 99" width="715"height="497" alt="图像 2"/></div><div class="GaleryRightPanel"><img id="img3" src="/Content/Public/images/2.png" style="z-index: 98" width="140"height="140" alt="图像 2"/></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 第三 = $('img#img3').attr('src');$('img#img3').attr('src', second);$('img#img2').attr('src', currentScr);$('img#img1').attr('src', 第三个);});$('img#img3').click(function () {var 第三 = $(this).attr('src');var first = $('img#img1').attr('src');var second = $('img#img2').attr('src');$('img#img2').attr('src', 第三个);$('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的大图
如何做到这一点?,请帮帮我
这里您需要的是使用双端队列数据结构,以便您可以遍历图像.
这是一个工作演示 - 如果你给我我可以制作的大图像的 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]);//- 在这里做一些事情来使用更大版本的图像$('#img3').attr('src', imgs[1]);imgs.unshift(imgs.pop());});$('#img3').click(function () {$('#img1').attr('src', imgs[1]);$('#img2').attr('src', imgs[2]);//- 在这里做一些事情来使用更大版本的图像$('#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',大:'http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_b.jpg'};imgs[1] = {small: 'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_t.jpg',大:'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_b.jpg'};imgs[2] = {小:'http://farm9.staticflickr.com/8201/8219867682_7c9aea748f_t.jpg',大:'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());});
Good day guys,
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>
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).
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:
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.
Here's a working demo - if you give me URLs to the big images I can make it work as you described.
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());
});
这篇关于使用 Jquery(圆周运动)更改图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!