如何在3張圖像之間每5秒切換一次的同一頁面上創建9張圖像。我可以做一個，但不能做多個

-2

<script type="text/javascript"> 
var currPic = 1; 
var totPics = 3; 
var keepTime; 

function setupPicChange() { 
    keepTime = setTimeout("changePic()", 5000); 
} 

function changePic() { 
    currPic++; 
    if (currPic > totPics) currPic = 1; 
    document.getElementById("picture1").src = "advert" + currPic + ".jpg"; 
    setupPicChange(); 
} 
</script>

你好，這是我的腳本有一個圖像，5秒後改變三次，它完美的作品，但有人可以在非常簡單的條款告訴我如何使這適用於9個不同的圖像，所有更改3次，在同一時間，但不同的圖像？如何在3張圖像之間每5秒切換一次的同一頁面上創建9張圖像。我可以做一個，但不能做多個

例如廣告1，將更改爲廣告2，然後廣告3 ................ 下面............ .....廣告4將更改爲廣告5，然後廣告6 ................下面............... .........廣告7將更改爲廣告8，然後廣告9 .........一直到廣告27.他們不會實際上是廣告，這只是一個很好的例子我需要知道的。

再次感謝傢伙！

來源

2013-11-15 JSStudent

爲什麼jQuery標籤我看不到。 – j08691

他們都有id picture1嗎？ –

嘗試自己解決這個問題，然後在遇到問題時再回來。 –

你應該考慮抽象你現在使用的邏輯來適用於一組圖像。這裏有一個例子：的

<script type="text/javascript"> 
var rotators = [ 
    { id: 'picture1', images: ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'], selectedIndex: 0 }, 
    { id: 'picture2', images: ['pic4.jpg', 'pic5.jpg', 'pic6.jpg'], selectedIndex: 0 }, 
    { id: 'picture3', images: ['pic7.jpg', 'pic8.jpg', 'pic9.jpg'], selectedIndex: 0 } 
]; 

var updateImages = function() { 
    for (var i=0; i < rotators.length; i++) { 
     var rotator = rotators[i]; 
     rotator.selectedIndex++; 
     if (rotator.selectedIndex >= rotator.images.length) { 
      rotator.selectedIndex = 0; 
     } 
     document.getElementById(rotator.id).src = rotator.images[rotator.selectedIndex]; 
    } 
}; 
var timer = setInterval(updateImages, 5000); 
</script>

這使得您目前正在運行的組件（您想改變圖像的ID，要旋轉的影像，並在這些圖片你的當前位置）的屬性放置在數組中的對象。然後，執行更新的函數（如changePic方法）可以遍歷數組中的所有對象，並使用相同的邏輯更新每個對象。

我還將setTimeout調用更改爲setInterval，它將每X毫秒調用一次提供的函數，而不是隻調用一次，然後不得不重置計時器。

來源

2013-11-15 15:41:33 palmsey

如何在3張圖像之間每5秒切換一次的同一頁面上創建9張圖像。我可以做一個，但不能做多個

回答

相關問題