创建一个垂直缩略图并显示3个图像

Question

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

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

我只是隐藏使用CSS额外的图像 “溢出：隐藏”。我不知道如何添加上一个和下一个按钮来提供它们。

这是我的一些代码：

  {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更简单。只要删除第一个孩子，将他追加到最后，并让CSS显示前三个孩子。

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

 
next.addEventListener('click', function() { 
 
\t 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'; 
}); 

您添加一个事件处理您的按钮（一个或多个），并显示/隐藏相应的图像。