Resim slayt gösterisi zamanlayıcı hızı, bir sonraki veya bir önceki düğüme tıkladığınızda artmaya başlar, JavaScript'i kullanarak

Question

JavaScript'i kullanarak basit bir görüntü kaydırıcısı yazdım. Bu otomatik olarak kaydırmak için 5000 ms zamanlayıcı ayarladık. ama bir sonraki veya bir önceki düğmeye tıkladığımızda artış oluyor. Ben

HTML Kod aşağıdaki kodu yapıştırılan:

<section id="intro"> 
     <div id="prev"><br/><br/><br/><br/><img onclick="rotateImages(0);" src="./images/slider/prev1.png"/></div> 
     <div id="next"><img onclick="rotateImages(1);" src="./images/slider/next1.png"/></div> 
    </section> 

JavaScript kodu:

<script type="text/javascript"> 

     var num = 0; 
     var temp = 0; 
     var speed = 5000; 
     var preloads = []; 

     preload(
       '1.png', 
       '2.jpg', 
       '3.jpg', 
       '4.jpg', 
       '5.png' 
       ); 

     function preload() { 

      for (var c = 0; c < arguments.length; c++) { 
       preloads[preloads.length] = new Image(); 
       preloads[preloads.length - 1].src = arguments[c]; 
      } 
     } 

     function rotateImages(flag) { 
      if (flag == 0) 
      { 
       num = num - 1; 
       if (num < 0) 
        num = preloads.length; 
      } 
      else 
      { 
       num = num + 1; 
       if (num >= preloads.length) 
        num = 0; 
      } 
      if (num == temp) { 
       rotateImages(1); 
      } else { 
       var str = preloads[num].src; 
       var resArr = str.split("/"); 
       var picName = resArr[resArr.length - 1]; 
       document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')'; 
       temp = num; 
       setTimeout(function() { 
        rotateImages(1) 
       }, speed); 
      } 
     } 

     if (window.addEventListener) { 
      window.addEventListener('load', function() { 
       setTimeout(function() { 
        rotateImages(1) 
       }, speed) 
      }, false); 
     } else { 
      if (window.attachEvent) { 
       window.attachEvent('onload', function() { 
        setTimeout(function() { 
         rotateImages(1) 
        }, speed) 
       }); 
      } 
     } 
    </script> 

Answer 1

Bir önceki zamanlayıcı temizlemeniz gerekir. Aksi takdirde, setTimeout() döndürülen referansı kaydetme rotateImages (her çağrısıyla eklenen yeni sayaçlarını) olacak ve onu

var num = 0; 
var temp = 0; 
var speed = 5000; 
var preloads = []; 
var timeout; 

preload(
    '1.png', 
    '2.jpg', 
    '3.jpg', 
    '4.jpg', 
    '5.png' 
); 

function preload() { 

    for (var c = 0; c < arguments.length; c++) { 
    preloads[preloads.length] = new Image(); 
    preloads[preloads.length - 1].src = arguments[c]; 
    } 
} 

function rotateImages(flag) { 
    if (flag == 0) { 
    num = num - 1; 
    if (num < 0) 
     num = preloads.length; 
    } else { 
    num = num + 1; 
    if (num >= preloads.length) 
     num = 0; 
    } 
    if (num == temp) { 
    rotateImages(1); 
    } else { 
    var str = preloads[num].src; 
    var resArr = str.split("/"); 
    var picName = resArr[resArr.length - 1]; 
    document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')'; 
    temp = num; 

    if (!!timeout) { 
     clearTimeout(timeout); 
    } 
    timeout = setTimeout(function() { 
     rotateImages(1); 
    }, speed); 
    } 
} 

if (window.addEventListener) { 
    window.addEventListener('load', function() { 
    setTimeout(function() { 
     rotateImages(1) 
    }, speed) 
    }, false); 
} else { 
    if (window.attachEvent) { 
    window.attachEvent('onload', function() { 
     setTimeout(function() { 
     rotateImages(1) 
     }, speed) 
    }); 
    } 
}