原生JS实现幻灯片轮播效果

在以往的认知中，一直觉得用原生JS写轮播是件很可贵事情，今天上班仿照网上的写了一个小demo。小试牛刀。

大体效果：

html结构很简单，两个列表，一个表明图片列表，一个是右下角序号列表。

<div id="box">
    <ul class="list">
        <li><img src="01.jpg" width="490" height="170" /></li>
        <li><img src="02.jpg" width="490" height="170" /></li>
        <li><img src="03.jpg" width="490" height="170" /></li>
        <li><img src="04.jpg" width="490" height="170" /></li>
        <li><img src="05.jpg" width="490" height="170" /></li>
    </ul>
    <ul class="count">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

布局的大体想法是图片所有绝对定位重合，透明度为1，右下角序号给选中的添加样式。样式都很简单。

关于JS方面，本身仍是捉摸了好久，刚开始实现时，当鼠标移入右下角对应序列号时图片可以准时切换，可是鼠标移出时便不能自动播放，关于setInterval和clearInterval本身的处理仍是不是很好。借鉴了网上的案列以后，具体的实现逻辑简单为，先写一个图片的展示方法，和鼠标移出图片时的定时函数。这样能够在事件中直接调用，值得注意的一点就是在鼠标移入时，记得清除定时器。下面上代码：

这是图片展现函数，参数为当前的展现的index。先让全部图片透明度为0；全部下标没有样式，而后给当前的加上样式，透明度为1；

   function show(a){
        for(var i=0;i<oLi.length;i++){
            oLi[i].style.opacity= 0;
            oImg[i].className = '';
        }
        oLi[a].style.opacity = 200;
        oImg[a].className = 'current';
    }

而后写一个鼠标移除时的定时器，图片自动轮播函数：

   function autoplay(){
        time = setInterval(function(){
            b++;
            if(b>=oImg.length){
                b=0;
            }
            show(b);
        },1000);
    }
    autoplay();//自动运行

最后是鼠标移入移出事件：

 for(var i=0;i<oImg.length;i++){
        oImg[i].index = i;
        oImg[i].onmouseover=function(){
            clearInterval(time);
            show(this.index)
        }
        oImg[i].onmouseout=function(){
            autoplay();
        }
    }

代码只是写了一个结构骨架，实现大体效果，具体能够优化的地方还有不少，对于动效方面能够对透明度的改变设置一个函数，让透明度缓慢变成1，或者对图片的定位和移动方向进行改变，实现真正意义上的左右轮播。大体原理都是差很少的。

原生JS实现轮播，于我而言仍是有点小难度的，由于JS写的比较少，因此对于总体的逻辑把握很差，虽有曲折，可是靠着本身也是写了出来。

总结一些轮播遇到的大体困难，第一个是对于鼠标移出时的定时自动轮播，刚开始本身是写在事件onmouseout里面的，可是测试过程当中发现事件只会触发一次，因此致使轮播不能执行，因此选择在从新写了一个方法。第二个就是对于函数的传参问题，我写函数一直没有传参的习惯，都是匿名函数，虽然知道适用场景不一样，对函数的运用应该灵活，多是由于作的项目太少，经验仍是太不足，第三个就是细节方面，例如移入时清除定时器，轮播要先执行一次等。总之收获仍是很大的。

感谢阅读。