html中轮播时，四个圆点和四个图片对应显示的情况

就像这样的例子，下面四个圆点，显示圆点是，上面的四个图片会对应的显示。这样的情况，可以参考如下的方法实现。更改图片<img />标签显示的图片时，可以使用document.getElementById('img').src="img/croll.png";方法。

下面是四个圆点的布局代码：

<div class="index_fanye" id="index_fanye">
<img src="img/croll_click.png" class="index_fanyel"/>
<img src="img/croll.png" class="index_fanyel"/>
<img src="img/croll.png" class="index_fanyel"/>
<img src="img/croll.png" class="index_fanyel"/>
</div>

下面是对应的四张大图片的布局：

<div class="index_lunbo">
<img src="img/lunbopic.png" width="100%" height="100%" style="z-index: -1;" class="index_lunbo_img"/>
</div>

下面是js控制显示逻辑处理代码：

<script>
var oCar = document.getElementById('index_lunbo');
    var oImg=document.getElementsByClassName('index_lunbo_img')[0];
   var arrUrl = ['img/lunbopic.png', 
    'img/1.jpg',
    'img/2.jpg', 
    'img/list-pic01.png', ];
    var aSpan = document.getElementsByClassName("index_fanyel");
    var num = 0;
    //定時器
    var timer = setInterval(function() {
       num++;
        num %= arrUrl.length;
        fnTab();
    }, 1500);
    // 有用戶來操作的定時器，開啟之前一定要先關
   //有用户来操作定时器，开放之前一定要先关
    oCar.onmouseover = function() {
       clearInterval(timer);
   }
   oCar.onmouseout = function() {
       timer = setInterval(function() {
           num++;
           num %= arrUrl.length;
           fnTab();
       }, 3000);
   };
   
   // 初始化
   function fnTab() {
       oImg.src = arrUrl[num];
       for(var i = 0; i < aSpan.length; i++) {
           aSpan[i].src="img/croll.png";
       }
      aSpan[num].src="img/croll_click.png";
   }
   fnTab();
   //鼠標放上去顯示本塊內容
   for(var i = 0; i < aSpan.length; i++) {
       aSpan[i].index = i;
       
       // 索引值
       aSpan[i].onmouseover = function() {
           num = this.index;
           fnTab();
       }
   }

</script>