js基礎練習--控制多組圖片切換

js基礎練習題，一個按鈕控制兩組圖片的切換，做這題的時候我忽然想到了將num1、mun2……都存放在一個數組中，根據索引值匹配到對應相應組的圖片，這樣不管有多少組圖片都簡單的搞定切換，可惜js基礎都沒學全，不知道數組的數組的變數怎麼用，哎……先把問題放在這裡吧，繼續啃基礎知識！

CSS:

*{margin: 0;padding: 0;}
.cont{
       margin: 30px auto;
       height: 400px;
       width: 800px;
       padding: 20px;
       border:1px solid #ccc;
       position: relative;
}
.div1{float: left;}
.div2{float: right;}
.div1,.div2{
    height: 400px;
    width: 340px;
    overflow: hidden;
}
.div1 img,.div2 img{
    height: 300px;
    width: 338px;
    overflow: hidden;
    border:1px solid #e4007e;
}
.div1 p,.div2 p{
    text-align: center;
    height: 38px;
    line-height: 38px;
}

HTML:

<input id="btn1" type="button" value="上一組">
<input id="btn2" type="button" value="下一組">
<div class="cont" id="cont">
    <div class="div1">
        <img src="img/small.jpg">
        <p>第一組第一張</p>
        <span>1/4</span>
    </div>
    <div class="div2">
        <img src="img/small-04.jpg">
        <p>第二組第一張</p>
        <span>1/3</span>
    </div>
</div>

JS:

var oBtn1=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');
    var oDiv=document.getElementById('cont');
    var aImg=oDiv.getElementsByTagName('img');
    var aSpan=oDiv.getElementsByTagName('span');
    var aP=oDiv.getElementsByTagName('p');
    var num1=0;//存放數字
    var num2=0;//存放數字
    var arrUrl1=['img/small.jpg','img/small-02.jpg','img/small-03.jpg','img/small-04.jpg'];
    var arrUrl2=['img/small-05.jpg','img/small-06.jpg','img/small-07.jpg'];
    var oText1=['第一組第一張','第一組第二張','第一組第三張','第一組第四張'];
    var oText2=['第二組第一張','第二組第二張','第二組第三張'];

    function Tab(){
        aImg[0].src=arrUrl1[num1];
        aImg[1].src=arrUrl2[num2];
        aP[0].innerHTML=oText1[num1];
        aP[1].innerHTML=oText2[num2];
        aSpan[0].innerHTML=num1+1+'/'+arrUrl1.length;
        aSpan[1].innerHTML=num2+1+'/'+arrUrl2.length;
    }
    Tab();
    oBtn2.onclick=function(){
        num1++;
        num2++;
        if (num1==arrUrl1.length) {
            num1=0;
        };
        if (num2==arrUrl2.length) {
            num2=0;
        };
        Tab();
    }
    oBtn1.onclick=function(){
        num1--;
        num2--;
        if (num1==-1) {
            num1=arrUrl1.length-1;
        };
        if (num2==-1) {
            num2=arrUrl2.length-1;
        };
        Tab();
    }