javascript - 创建显示 3 个图像的垂直缩略图

Question

我需要帮助来创建一个显示三个图像的垂直缩略图。和下一步按钮显示其他图像。这些图像是从数据库中循环的。下图是我想要的预览。例如我有 5 张图片，我的页面应该显示第 1、2、3 张图片。然后单击下一步按钮，它应该隐藏第一张图像并仅显示第二、第三和第四张图像。任何帮助将不胜感激。

到目前为止，这就是我所取得的成就。

我只是使用 css“overflow:hidden”隐藏了额外的图像。我不知道如何添加上一个和下一个按钮来调出它们。

这是我的一些代码:

            {foreach from=$images item=i name=images}
            {if $smarty.foreach.images.iteration <= 16 }
              <div class="thumbnail col-md-12 col-sm-12 col-xs-12"><a href="{$i.image_url|amp}" thumb="{$i.image_url|amp}" data-fancybox-group="gallery" class="fancybox" {if $smarty.foreach.images.iteration eq 1} id="first_icon"{/if} onclick="return {if $config.Detailed_Product_Images.is_jqzoom eq 'Y'}false{else}dicon_click({$smarty.foreach.images.iteration}, '{$config.Detailed_Product_Images.det_slideshow_delay}', '{$images_counter}');{/if}" {if $config.Detailed_Product_Images.is_rollover eq 'Y'} onmouseover="func_mouse_over(this, {$i.thbn_image_x}, {$i.thbn_image_y});"{/if}  target="_blank">
            <img src="{$i.image_url|amp}" alt="" >
              </a></div>
            {/if}
        {/foreach}

此部分仅用于显示缩略图。不要介意 href 部分。

Answer 1

这是一个更新的答案。这有点棘手，因为您必须摆弄 DOM 才能使图像以轮播方式滚动。它所做的是获取缩略图并显示前三个，同时隐藏其余部分。

然后，每次单击下一个按钮时，它都会从 DOM 中删除第一张图片并将其放在列表的末尾，然后显示前三张图片，同时隐藏其余图片。

所以您确实不需要数组，但您的想法有点相同:去掉第一个东西，把它放在最后，然后显示前三个并隐藏其余的。

编辑:我意识到我们不需要使用 JavaScript 来显示/隐藏元素，使用 CSS 会简单得多。只需删除第一个 child ，将他追加到末尾，让 CSS 显示前 3 个 child 。

var thumbs = document.querySelector('.thumbs');
var next = document.querySelector('button');

next.addEventListener('click', function() {
	var child = thumbs.removeChild(thumbs.firstElementChild);
  thumbs.appendChild(child);
});

.thumb {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-family: sans-serif;
  text-align: center;
  line-height: 100px;
  margin: 10px;
  display: none;
}

.thumb:nth-child(-n+3) {
  display: block;
}

<div class="thumbs">
  <div class="thumb">
    img 1
  </div>
  <div class="thumb">
    img 2
  </div>
  <div class="thumb">
    img 3
  </div>
  <div class="thumb">
    img 4
  </div>
  <div class="thumb">
    img 5
  </div>
</div>
<button>
  Next
</button>

这是用于回答不同问题的图片库示例，但您可以通过“下一步”按钮查看想法。

https://jsfiddle.net/subterrane/bb196sts/

button.addEventListener('click', function() {
    for (var ix = 0; ix < images.length; ix++) {
     images[ix].style.display = 'none';
    }

     index++;
     if (index >= images.length) index = 0;
    images[index].style.display = 'block';
});

您将事件处理程序添加到您的按钮并适本地显示/隐藏图像。