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

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

大致效果:

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

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

感谢阅读。

上一篇:2-4、nginx特性及基础概念-nginx web服务配置详解


下一篇:对javaweb项目中web.xml重用配置的理解(个人学习小结)