使用箭头标记水平滚动 div 图像，<a>无需 JQUERY

Question

>我需要在使用纯 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>

Answer 1

我为此得到了一个有效的解决方案。 on单击锚标记添加了以下功能。

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