js实现轮播图效果的案例

上期我们讲了如何用原生js去搭建html的框架，也跟大家说了后期是要做轮播图的案例的，那么，这期我们起看看，如何实现轮播图的。

注意：轮播图写的很low，还请各位大神不喜勿喷。 好了废话不多说了，下面让我们一起去探讨一下吧。
上期我已经把源码公布了一部分了，这期让我们来看看js部分的源码。

//首先我们先获取每一个标签，
var span = document.getElementsByTagName('span')
       var imgs = document.getElementsByTagName('img')
       var pre = document.getElementById('pre');
       var next = document.getElementById('next');
       //给第一个img（图片）添加样式叫它显示，让其与的img隐藏
       imgs[0].className='active'
   //count声明一个计数器
       var count = 0
      // 给按钮做点击事件
       next.onclick = function () {
      // 当点击时count就加加
           ++count;
           //遍历获取到每一张图片
           for (var i = 0; i < imgs.length; i++) {
               imgs[i].className = ''
               span[i].className = ''
           }
           //用if来进行判断count的计数器
           if (count >= 4) {
               count = 0;
           }
           imgs[count].className = 'active'
           span[count].className = 'active_circle'

       }
       // 给按钮做点击事件
       pre.onclick = function () {
        // 当点击时count就减减
           --count;
           //遍历获取到每一张图片
           for (var i = 0; i < imgs.length; i++) {
               imgs[i].className = ''
               span[i].className = ''
           }
           //用if来进行判断count的计数器
           if (count <= 0) {
               count = 3;
           }
           imgs[count].className = 'active'
           span[count].className = 'active_circle'

       }
       //for循环遍历获取到每一个span标签
       for (var i = 0; i < span.length; i++) {
           span[i].i = i
           给span做点击事件
           //span[i].onclick = function () {
               for (var x = 0; x < span.length; x++) {
                   span[x].className = ''
                   imgs[x].className = ''
               }
               var index = this.i
               count = index
               //加样式
               this.className = 'active_circle'
               imgs[index].className = 'active'
           }
       }

好了各位，以上就是用原生的js的实现的轮播效果，虽然有点low 但还能将就看一下，接下来就让我们一起去看实现的先过吧。