setTimeout的事件不工作屬性格式時相同的程序是在兩個不同的標籤

這裏開我試圖做圖像滑塊兩個圖像，但是當我打開同一個頁面中的兩個標籤，或者如果我儘量減少Firefox和最大化再次圖像滑塊閃爍並且工作不正常。隱藏和顯示類使用setTimeout方法，它們放置在也使用setTimeout方法的淡入淡出類中。setTimeout的事件不工作屬性格式時相同的程序是在兩個不同的標籤

<html> 
    <head> 
     <style type="text/css"> 
      .image1 { 
       height: 300; 
       left: 181px; 
       position: absolute; 
       top: 103px; 
       width: 300; 
      } 
     </style> 
     <script type="text/javascript"> 
      var a = 1; 
      var flg = 0, 
       flg2 = 0; 

      function fade() { 
       setTimeout(function() { 
        if (flg2 == 0) { 
         hide(); 
         flg2 = 1; 
         fade(); 
        } else { 
         show(); 
         flg2 = 0; 
         fade(); 
        } 
       }, 3000); 

      } 
      function hide() { 
       document.getElementById("img1").style.opacity = a; 
       document.getElementById("img2").style.opacity = (1 - a); 
       if (a > 0) 
        a = a - 0.1; 
       else 
        flg = 1; 

       if (flg == 0) 
        setTimeout(function() { 
         hide(); 
        }, 50); 
       else 
        flg = 0; 
       } 
      function show() { 
       document.getElementById("img1").style.opacity = a; 
       document.getElementById("img2").style.opacity = (1 - a); 
       if (a < 1.0) 
        a = a + 0.1; 
       else 
        flg = 1; 
       if (flg == 0) 
        setTimeout(function() { 
         show(); 
        }, 50); 
       else 
        flg = 0; 
       } 
     </script> 
    </head> 
    <body onload="fade()"> 
     <img class="image1" height="225" id="img1" src="img/image1.jpg" style="z-index:100" width="225"/> 
     <img class="image1" height="225" id="img2" src="img/image2.jpg" style="z-index:1" width="225"/> 
    </body> 
</html>

來源

2013-10-29 user2138414

當詢問你的代碼的幫助，請花時間來格式化你的代碼*可讀取*，使用適當的縮進和等。 –

我無法複製，請提供更多詳情？這是在某個版本的Firefox/OS上？我在Mac上使用Firefox 24。 – Mataniko

我不確定代碼在這裏是完全正確的。它看起來像是對setTimeout的錯誤使用。也許setInterval會更合適？

你開到使用庫如jQuery？這會照顧你的很多代碼

//-- our global image references 
var img1, img2; 

//-- our global interval id, in case we need to stop/start animation 
//-- via clearInterval(intervalId) 
var intervalId; 

//-- start animation on document load 
$(document).ready(function() { 
    //-- set image references to appropiate image ids 
    img1 = $('#img1'); 
    img2 = $('#img2'); 

    //-- start animation loop 
    intervalId = setInterval(function() { 
     //-- using jquery's :visible check show/hide appropriately 
     if (img1.is(':visible')) { 
      img1.fadeOut(); 
      img2.fadeIn(); 
     } else { 
      img1.fadeIn(); 
      img2.fadeOut(); 
     } 
    }, 3000); 
});

的jsfiddle的：http://jsfiddle.net/dboots/3AenB

來源

2013-10-29 18:02:12

setInterval也給出了同樣的問題，我真的很感興趣與JavaScript做。有沒有其他的方式來做到這一點在JavaScript中。 – user2138414

setTimeout的事件不工作屬性格式時相同的程序是在兩個不同的標籤

回答

相關問題