使用不带 JQUERY 的箭头 <a> 标签水平滚动 div 图像答案

【问题标题】：Scroll div images horizontally using arrow <a> tag without JQUERY使用不带 JQUERY 的箭头 <a> 标签水平滚动 div 图像
【发布时间】：2018-05-10 21:24:13
【问题描述】：

我需要使用纯 javascript 单击左右箭头（锚标记）在 div 中水平滚动一组图像。我看到很多使用 jquery 的解决方案。但由于某种原因，我不能在我的网站中使用 jquery。我的代码如下。任何帮助深表感谢。我需要在没有 jquery 的情况下实现类似于 http://jsfiddle.net/yfqyq9a9/2/ 的东西。

<div class="ImageContainer">
<a id="prevPageButton" href="#" class="prevPageButton"  role="button"></a>
<div class="SKUImages-wrapper">

                <img itemprop="image" id="Image1" src="01.jpg" alt="" />

                <img itemprop="image" id="Image2" src="02.jpg" alt="" />

                <img itemprop="image" id="Image3" src="03.jpg" alt="" />

                <img itemprop="image" id="Image4" src="04.jpg" alt="" />

                <img itemprop="image" id="Image5" src="05.jpg" alt="" />

                <img itemprop="image" id="Image6" src="06.jpg" alt="" />

                <img itemprop="image" id="Image7" src="07.jpg" alt="" />

                <img itemprop="image" id="Image8" src="08.jpg" alt="" />

</div>
    <div class="nextPageButton-wrap"
    <a id="nextPageButton" href="#" class="nextPageButton" role="button" ></a>
    </div>
</div>

【问题讨论】：

你在javascript中尝试过什么吗？如果是这样，您也可以在这里发布您尝试的内容吗？
请向我们展示您到目前为止所做的尝试。
到目前为止我找不到解决方案。我尝试了一些滑动条的东西，但这不是必需的
@JustinPearce 我为此添加了一个可行的解决方案。我正在看的另一件事是，单击右箭头时，当它到达最后一张图片时，有没有办法滚动到第一张图片？
@AndrewL 添加了下面的代码

标签： javascript horizontal-scrolling

【解决方案1】：

我有一个可行的解决方案。锚标签的onClick添加了以下功能。

sideScroll : function (direction,speed,distance,step){
        var element = document.getElementById('ImageContainer');
        var scrollAmount = 0;
        var slideTimer = setInterval(function(){
            if(direction == 'left'){
                element.scrollLeft -= step;
            } else {
                element.scrollLeft += step;
            }
            scrollAmount += step;
            if(scrollAmount >= distance){
                window.clearInterval(slideTimer);
            }
        }, speed);
    }

【讨论】：