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

前端之家收集整理的这篇文章主要介绍了使用Jquery(圆周运动)更改图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

美好的一天,

我有这样的DOM


最佳答案
这里你需要的是使用双端队列数据结构,这样你就可以遍历图像.

这是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());
});
@H_404_10@

还有一个稍微重构的版本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());
});
@H_404_10@

猜你在找的jQuery相关文章