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