Javascript隨機圖片輪播

隨機圖片輪播

來源:http://blog.xuite.net/abgne/diary1/3900476

上次教了隨機廣告播放後，現在要教的是另一種型的廣告播放，叫做輪播。什麼是輪播？顧名思義就是輪流播放，在不重整頁面下一直播放各種不同的圖片，這就是輪播。

輪播的原理其實跟隨機播放差不多，只是多用了個setInterval()函式而已。

讓我們來看要怎樣才能做到這樣的效果吧。接下來所用的範例是隨機廣告播放中的第二個範例。

以下為《JS》原始碼

<script type="text/javascript"> 
<!-- 
    var myImg = new Array("m01.gif","m02.gif","m03.gif","m04.gif","m05.gif"); 
    function showImg(){ 
    //乘以陣列的長度以取得從0~(陣列長度-1)的數字 
    var imgIndex = Math.floor(Math.random()*myImg.length); 
        document.getElementById("my_div").innerHTML  = "<img src='"+myImg[imgIndex]+"'>"; 
    } 
    //設定每兩秒執行一次showImg() 
    setInterval("showImg()",2000); 
//--> 
</script>

在JavaScript的部份，我只是把myImg陣列中的圖片換成比較可愛的男生圖，在showImg()函式中一樣沒做任何改變。

這邊要注意的是我用了setInterval("showImg()",2000);這個就是本次要教的重點。

setInterval()函式需要帶入兩個參數，第一個是所要執行的函式，第二個是每隔幾毫秒要執行一次。所以這邊我們是設成每隔2000毫秒(2秒)就執行一次showImg()函式，醬就能做到N張圖片隨機輪播了。

有人問說：如何做到在N張圖片中選出M張來做隨機的輪播呢？

我們拿剛剛的範例來修改一下就能做到醬的效果了，在Body部份一樣是不用做修改，所以直接來看JavaScript吧！

以下為《JS》原始碼

<script type="text/javascript"> 
<!-- 
    //共有幾張圖 
    var myImg = new Array("m01.gif","m02.gif","m03.gif","m04.gif","m05.gif"); 
    //要取幾張來播放 
    var playImg = new Array(3); 
    //目前播放到第幾張 
    var nowIndex=0; 
    //從allImg中取出N張放到myImg裡面 
    for(var i=0;i<playImg.length;i++){ 
        playImg[i] = myImg[Math.ceil(Math.random()*myImg.length-1)]; 
    } 

    function showImg(){ 
        document.getElementById("my_div").innerHTML = "<img src="+playImg[nowIndex]+">"; 
        //若nowIndex+1後>=playImg的長度，nowIndex重0開始；否則加1 
        nowIndex = (nowIndex+1)>= playImg.length?0:nowIndex+1; 
         
    } 
    //設定每2秒執行一次showImg() 
    setInterval("showImg()",2000); 
//--> 
</script>

我多宣告了一個長度為3的playImg()陣列來存放選出來後的圖片，用nowIndex來紀錄目前是播放到playImg()陣列中的第幾個位置，接下來就是用for迴圈來從myImg()陣列中隨機選3張圖放到playImg()陣列中。到這裡應該都還不難理解吧。

因為要控制圖片能從第一張、第二張...醬子播放到最後一張時，能繼續回到第一張的循環播放，所以在指定nowIndex時要判斷nowIndex+1後是否大於等於playImg()陣列的長度。

不過若多重整幾次上面的範例時，不知道您有沒有發現到圖片並沒有變化，正確的說法應該是圖片重覆，所以看起來會覺得沒變化。會醬子是因為我們在從myImg()陣列中取圖放到playImg()陣列時，我們並沒有判斷圖片是否已經存在playImg()陣列中了，所以才會發生圖片有重覆的情況。

讓我們來修改一下Code做個重覆的檢驗吧

以下為《JS》原始碼

//從allImg中取出N張放到myImg裡面 
for(var i=0;i<playImg.length;i++){ 
    playImg[i] = myImg[Math.ceil(Math.random()*myImg.length-1)]; 
    for(var j=0;j<i;j++){ 
        if(playImg[j]==playImg[i])    i--; 
    } 
}

重覆的判斷只要寫在for迴圈中就行了，多個迴圈來把剛從myImg()陣列中取出的圖片跟playImg()陣列中的做比較。醬子改過就能做到N張取M張來輪播且圖片不會重覆囉。

範例瀏覽：

http://abgne.myweb.hinet.net/0005/0005_1.html