Слайд div внутри другого div-эффекта

Я пытаюсь создать эффект скользящих изображений: Демо-версия онлайн link text.Слайд div внутри другого 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

Перед началом работы необходимо остановить предыдущую анимацию. В начале, установите:

var scrollIntervalID= null;

Тогда в начале function Scroll добавить:

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

Вы также хотите основать начальную позицию анимации на текущем значении scrollLeft, а не пытаясь вспомнить currentIndex.

источник

2010-04-11 10:23:17 bobince

установка scrollIntervalID на нуль и проверка его, если это значение null, не помогает. – mariki

Это быстрое решение, я не эксперт по 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 внутри другого div-эффекта

ответ

Смежные вопросы