在以往的认知中，一直以为用原生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里面的，但是测试过程中发现事件只会触发一次，所以导致轮播不能执行，所以选择在重新写了一个方法。第二个就是对于函数的传参问题，我写函数一直没有传参的习惯，都是匿名函数，虽然知道适用场景不同，对函数的运用应该灵活，可能是因为做的项目太少，经验还是太不足，第三个就是细节方面，例如移入时清除定时器，轮播要先执行一次等。总之收获还是很大的。
感谢阅读。