学习随笔 原生js实现轮播

Posted jcp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习随笔 原生js实现轮播相关的知识,希望对你有一定的参考价值。

兼容性:IE7及以上,火狐和谷歌等主流浏览器


html&CSS

最外面1个总容器#ad,里面放1个图片容器#list,1个按钮容器#btns,2个箭头#prev和#next;#ad相对定位,其他相对于#ad绝对定位。
所有图片都是绝对定位,会重叠在一起,默认z-index:0;给选中的图片和按钮分别设置class为selected和on,其中选中图片的z-index:1,才会出现在顶层。
JS

手动轮播:把选中图片和按钮添加相应类名selected和on,把原来选中的按钮和图片取消相应类名。需要用循环,把所有按钮都遍历一遍,并且给每个按钮都定义一个索引index值。其中,需要判断选中当前已选中的,则不操作。
自动轮播。函数nextPic用于实现下一张图片,设置一个定时器,每隔一定时间就执行一次函数nextPic。注意处理移动到最后一张和第一张
注意:鼠标移入按钮时,自动轮播应该暂停;鼠标移出按钮时,自动轮播应该继续,且给一个当前的索引,告诉自动轮播从哪里开始播。
修改代码:将第1步和第2步中代码相似的部分合并写为一个函数show()
将图片和左右箭头鼠标悬停时清除计时器,写成函数pause,将图片和左右箭头鼠标离开时重启计数器,写成函数restart
给向左箭头写一个函数prevPic,用于显示上一张图片
设置左右箭头的开始和暂停
为了实现切换时的透明度渐变效果,需要给图片设置transition属性。只设置selected的话则会出现白底渐变效果,需要给所有图片也设置默认的transition属性。但只兼容IE10及以上,因为IE9不支持transition属性
兼容IE9及以下

因为IE9不支持transition属性,尝试用js实现渐入渐出,思路如下:

写透明度变化函数
function setOpacity(elem,level){
 if(elem.filters){ //IE9及以下有这个属性
     elem.style.filter="alpha(opacity="+level+")";
 }else{
     elem.style.opacity=level/100;
 }
}
透明度变化是动态的,隔一段时间就要变化,首先想到用setInterval
function fade_In(elem){
 setOpacity(elem,0); //初始透明
 var level=0;
 setInterval(function(){
     if(level<=95){
         level+=5;
         setOpacity(elem,level);
         console.log(level);
     }
 }, 300);
}
也可以用setTimout,感觉比较绕(挺有意思的,值得深究)。先考虑用循环,注意循环内的匿名函数问题,可以用括号的方法自执行。

//淡入效果
function fadeIn(elem){
 setOpacity(elem,0); //初始透明
 for(var i=0;i<=20;i++){
     (function(){
         var level=i*5;
         //try 1
         //console.log(level); //测试用,会一次性全部依次输出,如L61
         //setOpacity(elem,level);  //如果这样写,而不用L54的setTimeout的话是无效的,会一次性地全部实现,没有动画效果。

         //try 2
         /*if(level<=100){
             console.log(level);
             setInterval(setOpacity(elem,level), 300);  //每隔一定时间就执行依次函数,但这里level已经是100了。应该是每隔一段时间就变化level。另外写一个。
         }*/

         //正确:
         setTimeout(function(){
             setOpacity(elem,level)
         }, i*300);   //于是用setTimeout:i=0,间隔为0时,level=0;i=1,间隔为300时,level=5,依次……从而实现渐变。
     })(i);  //传入参数i,函数立即执行,会依次执行21次
 }
}
注意渐出的函数,容易写错,如下:

//淡出效果1:错误,实际是淡入效果
function fade_Out(elem){
 for(var i=20;i>=0;i--){
     (function(){
         var level=i*5;  //level从100到0
         setTimeout(function(){
             setOpacity(elem,level);
             //console.log(level); //测试用,这里却是从0到100
         }, i*300);
         //因为i=0时,即间隔时间为0,level=0;i=20,即间隔时间为6000,level=100。虽然for循环是从大到小,但setTimeout执行却是按照间隔时间的顺序的。所以实际上是淡入效果。
     })(i);
 }
}
正确的如下:

//淡出效果2:正确
function fadeOut(elem){
 for(var i=0;i<=20;i++){
     (function(){
         var level=100-i*5; //level从100到0
         setTimeout(function(){
             setOpacity(elem,level)
         }, i*300);
     })(i);
 }
}
在show函数里添加渐入和渐出,第一轮轮播切换时会出现第5张图闪一下再切换到目标图片,后面几轮轮播就不会了———因为CSS中没有设置默认透明度为0,选中透明度为1,切换的时候原来选中的一下子就变到底层了,所以会有第5张闪现。

P.S.由于本例中尝试用setTimeout写渐出时的出错,引发的问题如:循环中的匿名函数问题,setTimeout的多次执行 






























































































以上是关于学习随笔 原生js实现轮播的主要内容,如果未能解决你的问题,请参考以下文章

计算广告-视频学习-随笔-009

javascript/js实现 排序二叉树数据结构 学习随笔

android 学习随笔二十七(JNI:Java Native Interface,JAVA原生接口 )

2018.06.20实训随笔

学习随笔JS初涉

node.js 学习随笔