Question

我曾尝试过很多这方面但互联网上的任何内容都没有。我想显示两个图像帧，就像只显示图像的东西。现在我有7到8个图像，当开始点击两个图像中的1个时，分配两个图像的变量增加1并且两个新图像被放置在那些重复相同过程的帧上。来自用户的输入应该只是点击这些图片中的1个。求助。

Answer 1

我从你的描述中理解的（因为你没有提供太多信息）是一个场景，

你有一个数组中的图像资源（只是图像的名称，如果它们在同一个文件夹中，否则它们的相对路径）

images = ["img1.jpg", "img2.jpg", ...]

和包含两个 img 标记的两个框架可能类似，

<img id="frame1" class="gallery"....
<img id="frame2" class="gallery"...

现在我们可以做的是点击任何一个图像，我们应该从数组中获取前两个图像，替换 img 标记的 src 并推送当前的标记相同的数组。你可以这样写，

$('.gallery').on('click', function() {

  var img1 = $('#frame1'),
      img2 = $('#frame2'),
      im1  = img1.attr('src'),
      im2  = img2.attr('src');

  img1.attr('src', images.shift())
  images.push(im1)
  img2.attr('src', images.shift())
  images.push(im2)

})

尽管这不是最好和最聪明的方法，但它很简单并且会完成你的工作。

Answer 2

你没有提供太多细节，所以即兴创作。将图像循环两次。

HTML：

<div class="image image-left">
    <img src="http://lorempixel.com/200/200/nature/1" alt="">
</div>
<div class="image image-right">
    <img src="http://lorempixel.com/200/200/nature/2" alt="">
</div>

JS：

var images = [
        'http://lorempixel.com/200/200/nature/1',
        'http://lorempixel.com/200/200/nature/2',
        'http://lorempixel.com/200/200/nature/3',
        'http://lorempixel.com/200/200/nature/4',
        'http://lorempixel.com/200/200/nature/5',
        'http://lorempixel.com/200/200/nature/6',
        'http://lorempixel.com/200/200/nature/7',
        'http://lorempixel.com/200/200/nature/8'
    ],
    index = 0,
    imgs = document.querySelectorAll('.image img');


[].slice.call(imgs).forEach(function(el) {
    el.onclick = function() {
        index = (index + 2) % images.length;
        imgs[0].src = images[index];
        imgs[1].src = images[index + 1];
    };
});

我想以更加可控的方式显示图像

2 个答案:

演示：http://jsfiddle.net/D8Ufu/