Hello guys i am a newbie JavaScript coder.
I was trying to make a JavaScript image slider, after long time i coded some code but, in the middle of the way i got a problem and it is that the slider break on the last sliding element.
I can't figure out what the problem is, maybe some one can help me.
[I can't use Jquery for some reasons]
Sorry for my bad English.
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slider</title>
<script type="text/javascript">
window.onload = function () {
var Slider = document.getElementById('Slider');
var SliderContent = document.getElementById('Slider-Content');
var Contents = SliderContent.childNodes;
var Slides = new Array();
var SlidesP = new Array();
(function SliderCSS () {
Slider.style.width = '500px';
Slider.style.height = '200px';
Slider.style.backgroundColor = '#F9F9F9';
Slider.style.border = '5px solid #F1F1F1';
Slider.style.position = 'relative';
Slider.style.margin = '0px auto';
})();
(function SliderContentCSS () {
SliderContent.style.position = 'absolute';
SliderContent.style.overflow = 'hidden';
SliderContent.style.width = '100%';
SliderContent.style.height = '100%';
})();
for(var s = 0, e = 0; s < Contents.length; s++) {
var _this = Contents[s];
if (_this.nodeType === 1) {
_this.style.cssText = 'position: absolute;px;width: 100%;height: 100%;';
_this.style.left = _this.offsetWidth * e + 'px';
e++;
Slides[e] = _this;
}
}
var Length = Slides.length - 1;
function Position () {
for (var i = 1; i < Slides.length; i++) {
SlidesP[i] = Slides[i].offsetLeft;
}
}
function Attr (cslide) {
for (var i = 1; i < Slides.length; i++) {
Slides[i].removeAttribute('Slide');
}
Slides[cslide].setAttribute('Slide', cslide);
}
var c = 1;
var Started = false;
function Slide () {
if (Started === true) {
console.log('Timeout');
return false;
};
Position();
Attr(c);
console.log(SlidesP);
var A = 0;
(function Start() {
console.log(A < Slides[c].offsetLeft);
console.log(A + '<' + Slides[c].offsetLeft + ':' + c);
if (A < Slides[c].offsetLeft) {
A = A + 25;
for (var i = 1; i < Slides.length; i++) {
Slides[i].style.left = SlidesP[i] - A + 'px';
}
Started = true;
setTimeout(Start, 35);
} else {
Started = false;
}
})();
if (c < Length) {
c++;
} else {
c = 1;
}
};
setInterval(Slide, 2000);
}
</script>
</head>
<body>
<div id='Slider'>
<div id='Slider-Content'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
on jsFiddle http://jsfiddle.net/WzCNQ/1/
您的代码不断将元素推向左侧,您应在循环结束时将其重置为初始位置。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.