学习随笔 原生js实现轮播

Posted 2020-09-04 jcp

兼容性：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的多次执行