Question

我正在尝试创建照片库。它将包含一组用屏幕在屏幕上移动的图像，当我点击任何图像时，它将在上面的div上放大。

我想要达到的新功能是，所选择的高亮显示图像和应停止移动，而选取框标记中的所有其他图像将继续移动。

我无法以粗体文字描述任务。请帮帮我。

这是我的代码

＆＃13;

function func(val) {
  var current_image = document.getElementById(val);
  var source = document.getElementById(val).src;
  document.getElementById("img1").src = source;
  current_image.style.border = "2px solid black";
}

＆＃13;

img {
  height: 200px;
  width: 200px;
}

#img1 {
  height: 440px;
  width: 100%;
}

＆＃13;

<img src="https://images.unsplash.com/photo-1486570318579-054c95b01160?ixlib=rb-0.3.5&s=8cb4fb1b4ac3ab4e5335a6f5961d5d86&auto=format&fit=crop&w=890&q=80" id="img1">
<div class="marqueeImage">
  <marquee onmouseover="stop()" onmouseout="start()">
    <img src="https://images.unsplash.com/photo-1472152083436-a6eede6efad9?ixlib=rb-0.3.5&s=93a9b1fd63f0d00e2edac3cea5650819&auto=format&fit=crop&w=749&q=80" onclick=func(1) id="1">
    <img src="https://images.unsplash.com/photo-1474436799594-1974f1add7ad?ixlib=rb-0.3.5&s=f5fc0f9a97ed3dc7d8f069470b51a864&auto=format&fit=crop&w=724&q=80" onclick=func(2) id="2">
    <img src="https://images.unsplash.com/photo-1475687111391-295db56c4d68?ixlib=rb-0.3.5&s=31e11f83c2196cf8c3df3afcbea3974f&auto=format&fit=crop&w=837&q=80" onclick=func(3) id="3">
    <img src="https://images.unsplash.com/photo-1490237014491-822aee911b99?ixlib=rb-0.3.5&s=3b012e88f4bd20f38706d25928b51fe6&auto=format&fit=crop&w=750&q=80" onclick=func(4) id="4">
    <img src="https://images.unsplash.com/photo-1482920387559-08269818bcfc?ixlib=rb-0.3.5&s=7d4daea39d40f2f10c879b75f5b7fddd&auto=format&fit=crop&w=750&q=80" onclick=func(5) id="5">
    <img src="https://images.unsplash.com/photo-1486570318579-054c95b01160?ixlib=rb-0.3.5&s=8cb4fb1b4ac3ab4e5335a6f5961d5d86&auto=format&fit=crop&w=890&q=80" onclick=func(6) id="6">
  </marquee>
</div>

＆＃13;

单个图像停止在多个图像选框中

0 个答案: