0

大家好,我是新手 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/

4

1 回答 1

0

您的代码不断将元素向左推,您应该在循环结束时将它们重置为初始位置。

于 2012-09-17T20:29:09.580 回答