大家好,
我有一个 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的大图。
如何实现?请帮忙。