第二張圖片滑動不能正常工作javascript

我想通過JavaScript在同一頁面添加兩個圖片滑塊。但只有一個滑塊正在工作，另一個是靜態的。第二張圖片滑動不能正常工作javascript

這是我的代碼到目前爲止我從網站上得到的。

<script type="text/javascript">  
    window.onload = function() { 
     var rotator = document.getElementById("rotator"); 
     var images = rotator.getElementsByTagName("img"); 
     for (var i = 1; i < images.length; i++) { 
      images[i].style.display = "none"; 
     } 
     var counter = 1; 
     setInterval(function() { 
      for (var i = 0; i < images.length; i++) { 
       images[i].style.display = "none"; 
      } 
      images[counter].style.display = "block"; 
      counter++; 
      if (counter == images.length) { 
       counter = 0; 
      } 
     }, 3000); 
    }; 
</script>

<div id="rotator"> 
    <img height="250px" width="200px" src="images/claim/1.jpg" alt="" /> 
    <img height="250px" width="200px" src="images/claim/2.jpg" alt="" /> 
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" /> 
</div>

來源

2012-12-18 Amir Hossain

它，因爲你的代碼應用滑動功能只在一個DIV。創建id ='rotator2'的另一個div，然後下面的代碼將觸發兩個幻燈片。

<script type="text/javascript"> 
     window.onload = function() { slideIt("rotator");slideIt("rotator2") ; } ; 
     function slideIt(contId) { 
      var rotator = document.getElementById(contId); 
      var images = rotator.getElementsByTagName("img"); 
      for (var i = 1; i < images.length; i++) { 
       images[i].style.display = "none"; 
      } 
      var counter = 1; 
      setInterval(function() { 
       for (var i = 0; i < images.length; i++) { 
        images[i].style.display = "none"; 
       } 
       images[counter].style.display = "block"; 
       counter++; 
       if (counter == images.length) { 
        counter = 0; 
       } 
      }, 3000); 
     }; 

</script>

來源

2012-12-18 11:16:53 DhruvPathak

我已經嘗試過使用第二個div但結果是一樣的。第二張幻燈片爲靜態。我想我必須使用一個函數，但因爲我不擅長JavaScript，所以爲什麼不能讓它變成possbile。 –

您還需要更改JavaScript，如答案中所述。 – DhruvPathak

謝謝。這是我想要的。 –

你必須定義兩個<div>例如rotator1和rotator2，和JS代碼，適用於2個街區。

<script type="text/javascript"> 
     window.onload = function() { 
      var rotator = document.getElementById("rotator1"); 
      var images = rotator.getElementsByTagName("img"); 
      for (var i = 1; i < images.length; i++) { 
       images[i].style.display = "none"; 
      } 
      var counter = 1; 
      setInterval(function() { 
       for (var i = 0; i < images.length; i++) { 
        images[i].style.display = "none"; 
       } 
       images[counter].style.display = "block"; 
       counter++; 
       if (counter == images.length) { 
        counter = 0; 
       } 
      }, 3000); 
     }; 

</script> 


    <div id="rotator1"> 
    <img height="250px" width="200px" src="images/claim/1.jpg" alt="" /> 
    <img height="250px" width="200px" src="images/claim/2.jpg" alt="" /> 
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" /> 
    </div> 

<script type="text/javascript"> 
     window.onload = function() { 
      var rotator = document.getElementById("rotator2"); 
      var images = rotator.getElementsByTagName("img"); 
      for (var i = 1; i < images.length; i++) { 
       images[i].style.display = "none"; 
      } 
      var counter = 1; 
      setInterval(function() { 
       for (var i = 0; i < images.length; i++) { 
        images[i].style.display = "none"; 
       } 
       images[counter].style.display = "block"; 
       counter++; 
       if (counter == images.length) { 
        counter = 0; 
       } 
      }, 3000); 
     }; 

</script> 


    <div id="rotator2"> 
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" /> 
    <img height="250px" width="200px" src="images/claim/4.jpg" alt="" /> 
    <img height="250px" width="200px" src="images/claim/5.jpg" alt="" /> 
    </div>

注意，你應該更好地在一個單獨的文件中定義一個JS函數並調用它兩次

來源

2012-12-18 11:17:10 berty

已經嘗試過，但無法實現。 –

如果我使用這個，那麼我必須編寫更多的代碼，是否有任何其他方式來最小化如使用函數。 –

第二張圖片滑動不能正常工作javascript

回答

相關問題