幻燈片裏面另一個div效果

問題是，當您單擊按鈕上的快速和隨機，而不是等待動畫完成導致不可預知的結果，甚至停止功能的工作。（並且一旦它停在2張圖片的中間......）

如何讓它在沒有錯誤的情況下工作？
我知道還有一些其他工具可以像jquery一樣滑動，還可以使用其他方法來改變position屬性而不是scrollLeft屬性。但是我想用scrollLeft來做，因爲它當然可能。

驗證碼：

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
      body 
      { 
       padding:0px; 
       margin:0px; 
      } 
      #imageContainer 
      { 
       width: 500px; 
       position: relative;    
      } 
      #div 
      {    
       overflow: hidden; 
       white-space: nowrap;        
      } 

      #div img { 
       cursor: pointer; 
       vertical-align: bottom; 
       width: 500px; 
       padding:0px; 
       margin:0px; 
       display:inline; 
      } 


     </style> 
     <script type="text/javascript">       
      var scrollIntervalID; 
      var currentIndex=0;         

      function Scroll(ind){ 

       var dir = ind ==currentIndex?0:ind<currentIndex?-1:1; 
       var steps = Math.abs(ind-currentIndex); 

       scrollIntervalID = setInterval(function(){ 
        var i=(steps*10)-1; 
        return function(){ 
         if (i <= 0) 
          clearInterval(scrollIntervalID); 
         var elm = document.getElementById("div");     
         elm.scrollLeft +=dir * 50; 
         i--; 

         document.getElementById("span").innerHTML=elm.scrollLeft; 

        } 
       }(), 15); 
       currentIndex=ind; 
      }    

     </script> 
    </head> 
    <body> 
     <div id="imageContainer"> 
      <div id="div"> 
       <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/> 
      </div>   
     </div> 

     <div> 
      <input type="button" value="1" onclick="Scroll(0);"/> 
      <input type="button" value="2" onclick="Scroll(1);"/> 
      <input type="button" value="3" onclick="Scroll(2);"/> 
      <input type="button" value="4" onclick="Scroll(3);"/> 
     </div> 
     <span id="span"></span> 
    </body> 
</html>

來源

2010-04-11 mariki

我會sriously建議你使用像jQuery框架，但如果你堅持要在當前版本下工作，你必須採取的情景照顧動畫期間恰好。

您有scrollIntervalID，但它不在函數的範圍之外使用。當前一個滑動動畫正在進行時，您可以嘗試使用clearInterval來清除間隔計時器，並在執行下一個動畫之前將位置前移到目標位置。

來源

2010-04-11 10:07:57

你的第二個段落是非常有益的，我測試了幾次，似乎工作的罰款。現在我會接受這個答案，如果後者將仍然有一個錯誤，我會重新打開這個問題，我們會嘗試一些其他的東西，我希望:) – mariki 2010-04-11 11:33:30

您需要在開始新動畫之前停止以前的動畫。在開始的時候，設置：

var scrollIntervalID= null;

然後在function Scroll附加的啓動：

if (scrollIntervalID!==null) { 
    clearInterval(scrollIntervalID); 
    scrollIntervalID= null; 
}

您還需要立足動畫的起始位置上的scrollLeft當前值，而不是試圖記住currentIndex。

來源

2010-04-11 10:23:17 bobince

設置scrollIntervalID爲空，並檢查它，如果它是空的沒有幫助。 – mariki 2010-04-11 11:22:13

這是一個快速修復，我不是一個JavaScript專家。但它的工作原理基於我的快速測試

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     body 
     { 
      padding:0px; 
      margin:0px; 
     } 
     #imageContainer 
     { 
      width: 500px; 
      position: relative;    
     } 
     #div 
     {    
      overflow: hidden; 
      white-space: nowrap;        
     } 

     #div img { 
      cursor: pointer; 
      vertical-align: bottom; 
      width: 500px; 
      padding:0px; 
      margin:0px; 
      display:inline; 
     } 


    </style> 
    <script type="text/javascript">       
     var scrollIntervalID; 
     var currentIndex=0;         
     var start = true; 
     function Scroll(ind){ 
      if(start){ 
      var dir = ind ==currentIndex?0:ind<currentIndex?-1:1; 
      var steps = Math.abs(ind-currentIndex); 

      scrollIntervalID = setInterval(function(){ 
      start = false; 
       var i=(steps*10)-1; 
       return function(){ 
        if (i <= 0) 
         clearInterval(scrollIntervalID); 
        var elm = document.getElementById("div");     
        elm.scrollLeft +=dir * 50; 
        i--; 

        document.getElementById("span").innerHTML=elm.scrollLeft; 

       } 
      }(), 0); 
      currentIndex=ind; 
      start = true; 
      } 
     }    

    </script> 
</head> 
<body> 
    <div id="imageContainer"> 
     <div id="div"> 
      <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/> 
     </div>   
    </div> 

    <div> 
     <input type="button" value="1" onclick="Scroll(0);"/> 
     <input type="button" value="2" onclick="Scroll(1);"/> 
     <input type="button" value="3" onclick="Scroll(2);"/> 
     <input type="button" value="4" onclick="Scroll(3);"/> 
    </div> 
    <span id="span"></span> 
</body>

來源

2010-04-11 11:33:39 keithics

幻燈片裏面另一個div效果

回答

相關問題