javascript圖像滑塊

你好傢伙我是一個新手JavaScript編碼器。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/

來源

2012-09-17 Bahaa zahika

不使用jQuery的一些原因是什麼？ – mplungjan

這對你來說意味着什麼嗎？ –

如果你可以使用jQuery，你可以簡單地使用[循環插件]（http://jquery.malsup.com/cycle/） – JKirchartz