Question

我有一个滚动的图片库，如下所示。 CSS将图像排成一行，水平滚动。在下面，我有一排相同的图像，但作为缩略图。我希望能够点击缩略图，并将正确的图像滚动到视图中。

HTML：

<div class="images_container">
  <img id="image_1" src="/image1.jpg">
  <img id="image_2" src="/image2.jpg">
  <img id="image_3" src="/image3.jpg">
</div>

<div class="images_container thumbnails">
  <a href="#image_1"><img src="/image1.jpg" class="thumbnail"></a>
  <a href="#image_2"><img src="/image2.jpg" class="thumbnail"></a>
  <a href="#image_3"><img src="/image3.jpg" class="thumbnail"></a>
</div>

CSS：

.images_container {
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 50rem;
  white-space: nowrap;
}

.images_container.thumbnails {
  max-height: 10rem;
}

.images_container img {
  vertical-align: top;
  height: 50rem;
}

.images_container.thumbnails img {
  height: 10rem;
}

这可以达到一定程度，但跳转到图像的ID是有问题的。如果较大的图像甚至是可见视口中的几个像素，则它无法“跳转”到它，因为它似乎在技术上在屏幕上。

当我点击相应的缩略图时，有没有办法可以使用Javascript将整个图像“滚动”到视图中？我无法访问此项目中的jQuery，但很高兴使用JavaScript来完成这项工作。

Answer 1

你可以试试这个，没有改变CSS，我在html中添加一个id并调用scrollTo函数：

Adaptor->dynamicCall("GetWPlace(long, long*, long*, BSTR*)", i, &DevplaceId,&DevplaceNum,&WPComments);

Answer 2

为了保持DOM清洁，我得到了这个只需要添加js

的解决方案

var elms = document.getElementsByClassName("thumbnail");
for (var i = 0; i < elms.length; i++) {
   elms[i].onclick = function(event) {
      event.preventDefault();
      event.stopPropagation();
      var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
      var v = document.getElementById(id).getBoundingClientRect().left;
      document.getElementsByClassName("images_container")[0].scrollLeft += v;
   }
}

见jsfiddle

Answer 3

这是我对滚动图库的一个没有（很好，最小）的JS解决方案的尝试。事实上，如果您使用：target伪选择器替换.active类，您可以一起删除Javascript，允许您单击缩略图来进行滚动。我通过小提琴这样做更容易

function removeClass(element, className) {
  var classes = element.className.split(' ');
  var key = classes.findIndex(function(name) {
    return name == className
  });
  classes.splice(key, 1);
  element.className = classes.join(' ');
}

function addClass(element, className) {
  var classes = element.className.split(' ');
  classes.push(className);
  element.className = classes.join(' ');
}

setInterval(function() {
  var current = document.querySelector('.images .image.active');
  var next = current.nextElementSibling;

  if (!next) {
    next = document.querySelector('.images .image:first-child');
  }

  removeClass(current, 'active');
  addClass(next, 'active');
}, 1500);

body {
  margin: 0;
  padding: 0;
  width: 500px;
  height: 500px;
}

.images {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

.image {
  width: 100%;
  height: 100%;
  top: 0px;
  position: absolute;
  left: -100%;
  float: left;
  transition: 1s;
}

.image.active {
  left: 0%;
}

.image.active ~ .image {
  left: 100%;
}

.black {
  background-color: black;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class='images'>
  <div class='image black active'></div>
  <div class='image red'></div>
  <div class='image blue'></div>
  <div class='image yellow'></div>
</div>

基本上它的工作方式是使div.images容器具有一定的高度和宽度，因此其中的所有图像都可以根据需要定位。我们最初将所有.image设置为left: -100%，以便它们完全偏离屏幕左侧。然后，我们将.image.active设置为left: 0，以便它显示在屏幕上。然后我们使用~选择器说明在当前（.image.current ~ .image）之后的所有兄弟姐妹应该是left: 100%，所以完全在右边。添加转换，您就拥有了一个完整的CSS滚动库。 JS仅用作更改当前活动图像的方式，如果需要，可以用:target替换它。

我使用的是div而不是img标签，因为它更容易提供具有div和背景颜色的POC，但它在过去的图像中效果很好。只需在<img>代码

中添加<div class='image'></div>标记即可

滚动图像库没有jQuery

3 个答案: