javascript圖像滑塊

Question

大家好，我是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/

Answer 1

您的代碼不斷將元素推向左側，您應在循環結束時將其重置為初始位置。

javascript圖像滑塊

問題描述

1 個解決方案

解決方案1
0 2012-09-17 20:29:09

javascript圖像滑塊

問題描述

1 個解決方案

解決方案1 0 2012-09-17 20:29:09

解決方案1
0 2012-09-17 20:29:09