Слайдер на js (Без Jquery) для анимации использую (setInterval)?

Question

[valitskiydmitriy]

Есть такая структура html документа:

<div class="slider">
    <div id="slideimg" style="margin-left: 0px">
        <div class="slide"><img src="img/slide-1.jpg"></div>
... 10 Аналогичных DIV 
    </div>
    <div class="nav">
        <div class="nav" id="next"><img src="img/next.png"></div>
        <div class="nav fclick"><img src="img/4dclick.png"></div>
        <div class="nav" id="prew"><img src="img/prew.png"></div>
    </div>
</div>

В слайдере отображается сразу 5 картинок (Div елементов)
CSS вот такой:

.slider {
    width: 1075px;
    height: 350px;
    background: #e7e7e7;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 16px 0px 0px 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);

}
#slideimg {
    position: relative;
    left: 0px;
    top: 0;
    width: 10000px;
    margin-left: 0px

}
.slide {
    width: 200px;
    float: left;
    margin-right: 16px;
}

Как реализовал на данный момент, по средством js прибавляю к значению margin-left нужное мне количество пикселей и слайдер работает, НО, прибавляет всегда разное значение, подскажите почему? Вот JS скрипт:

next.onclick = function() {
        var start = Date.now();
        var timer = setInterval(function() {
            var timePassed = Date.now() - start;

            slideimg.style.marginLeft =  parseInt(document.getElementById('slideimg').style.marginLeft) + timePassed / -45 + 'px';

            if (timePassed > 1100) clearInterval(timer);

        }, 65);
    }
   prew.onclick = function() {
        var start = Date.now();
        var timer = setInterval(function() {
            var timePassed = Date.now() - start;

            slideimg.style.marginLeft =  parseInt(document.getElementById('slideimg').style.marginLeft) + timePassed / +45 + 'px';

            if (timePassed > 1100) clearInterval(timer);

        }, 65);
    }

И пара вопросов, как сделать что бы при значении margin 0, нельзя было листать в обратную сторону, а при 1000 обнулить значение?

Answer 1

[Денис Инешин]

SetInterval не нужен. Добавьте на основной слой со слайдами CSS анимацию, а слайдеру добавляйте только одну координату без всякого там интервала. Сгенерировать анимацию можно тут: matthewlein.com/ceaser

Координаты можно прокручивать в другой конец простой проверкой:

var max = 1000;

if (x < 0) {
    x = max;
} else if (x > max) {
    x = 0;
}

Comments

[valitskiydmitriy]

Спасибо! А еще кнопки исчезают, когда отображается последний div 0_0

[valitskiydmitriy]

Денис Инешин Когда значене 800+ и нужно сдвинуть еще раз, исчезает посностью div (nav)

[Денис Инешин]

valitskiydmitriy: просто div (nav) должен лежать отдельным слоем, который не затрагивают смены координат. Стрелочки можно легко прятать той же проверкой что и выше. if (x === 0) или if (x === max) прячем соответствующую стрелочку.

[valitskiydmitriy]

Денис Инешин: Интересно что если листать в обратную сторону там хоть лопни (да еще не вставил проверку, руки кривоватые) а вот если именно отнимать px то только до 800

[Денис Инешин]

valitskiydmitriy: не понял вопроса.

[valitskiydmitriy]

Денис Инешин: 1) div и так лежит отдельным слоем (вроде как) если нажимать на кнопку prew и листать слайдер в обратную сторону то там хоть сколько не нажимай кнопки остаются а если использовать кнопку next то как только значение становится -846px то исчезает блок div. Конечно это исправил сделав кнопки вообще отдельно от слайдера, но просто интересно почему так
2) Вот вы отправили функцию для проверки, а как ее подставить? Попробовал, либо не работает, либо работает но никаких изменений. А сам код сократил вот так:

next.onclick = function() {
slideimg.style.marginLeft =  parseInt(document.getElementById('slideimg').style.marginLeft) -216 + 'px';
    }

[Денис Инешин]

valitskiydmitriy: потому что вам нужно считать координату отдельно, а потом уже подставлять её в margin. Тогда и проверку можно сделать легко.

[valitskiydmitriy]

Денис Инешин: Тогда нужно использовать getComputedStyle и через него получая значение прибавлять 216? X будет равно значению и его уже подставлять в вашу функцию проверки?

[Денис Инешин]

valitskiydmitriy: совсем не обязательно, если вы знаете размер заранее, то вы просто храните его в переменной х. И потом просто опереруете этой пременной, например так: x += 216 или там x -=216 и т.д. А потом уже x подставляете в margin

[valitskiydmitriy]

Денис Инешин Типо того?

next.onclick = function() {
        var max = 1000;
        x +=216;
        if (x < 0) {
            x = max;
        } else if (x > max) {
            x = 0;
        }

            slideimg.style.marginLeft =  parseInt(document.getElementById('slideimg').style.marginLeft)+ x + 'px';
    }

[Денис Инешин]

valitskiydmitriy: Ну да

[valitskiydmitriy]

Денис Инешин Буду приводить в рабочее состояние, спасибо за ответы!

[valitskiydmitriy]

Денис Инешин: Никак не получается, не работает :С код по сути такой же как в комментарии, уже по всякому делал, не получается

[Денис Инешин]

valitskiydmitriy: jsfiddle поможет сделать демо версию