大家好,我是新手 JavaScript 编码器。
我试图制作一个 JavaScript 图像滑块,经过很长时间我编写了一些代码,但是在中途我遇到了一个问题,那就是滑块在最后一个滑动元素上中断。
我无法弄清楚问题是什么,也许有人可以帮助我。
[由于某些原因我不能使用 Jquery]
对不起,我的英语不好。
我的代码:
<!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>
在 jsFiddle http://jsfiddle.net/WzCNQ/1/