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

Question

我需要滚动一组图片HOROZONTALLY在一个div点击左右箭头(锚标签)使用纯javascript。我看到很多使用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>

Answer 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);
    }