Перейти к первому элементу в div в горизонтальной прокрутке - чистый Javascript

У меня есть div, содержащий изображения, в которых у меня есть горизонтальная прокрутка. Есть ли способ, которым я могу реализовать функцию прокрутки до первого элемента в div, когда он достигает конца изображения, используя чистый JavaScript. Я видел несколько решений в jquery, но по какой-то причине я не могу использовать jquery. Мой код ниже. Любая помощь будет великой. Скрипка для справки: http://jsfiddle.net/pGR3B/2/

HTML

    <div class="ImageContainer">
<a id="prevPageButton" href="#" class="prevPageButton" onclick="sideScroll('left',25,100,10)  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" onclick="sideScroll('right',25,100,10) href="#" class="nextPageButton" role="button" ></a>
    </div>
</div>

JAVASCRIPT

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

0 ответов

Другие вопросы по тегам