Есть такая структура 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 обнулить значение?
