使用Jquery(圆周运动)更改图像

美好的一天,

我有这样的DOM


我需要的是,如果我点击img1,用img1替换img2,用img2替换img3,用img3替换img1(圆周运动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,3-> 1).这里2L是img1的大图.和
点击img3(1 <-2,2L< -3,3< -1).这里2L是img3的大图

怎么做？,请帮帮我


最佳答案
这里你需要的是使用双端队列数据结构,这样你就可以遍历图像.
这是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());
});


 原文链接：https://www.f2er.com/jquery/428139.html

使用Jquery(圆周运动)更改图像

猜你在找的jQuery相关文章