基于CSS3完成淡入(fadeIn)淡出(fadeOut)结果

网上的淡入淡出结果大多是遵照jquery中fadeIn和fadeOut的要领运用js来掌握元素的透明度到达目标,但瑕玷是有细微的卡顿感,而且运转效力平常。 这里供应别的一个思绪,即经由过程预先定义好的css款式掌握图片透明度的过渡, 这类要领过渡腻滑,过渡的结果基于css3的animation,所以效力高些。 思绪是将淡入,淡出的结果做成预先定义好的款式类,然后用JS转变元素的类来到达图片轮播。(注重:由于是基于CSS3的animation,在挪动端做的兼容性测试表现不错,桌面端临时没有发明太大的题目。但IE关于css的background支撑不太好,外链图片偶然会有题目。)
基于CSS3淡入淡出结果的图片自动轮播DEMO
症结点在于fadeIn和fadeOut之间的透明度切换:

/* 轮播图片默许的款式*/
       .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
      opacity:0;
      filter:alpha(opacity=0);
    } 
        .fadein{
            opacity:100;
            filter:alpha(opacity=100);
        }
    

PS:轮播图片默许透明度为0,设置一个opacity=100名为fadein的类运用JS掌握其与默许透明度的切换,本篇博客的轮播要领是自动的一张张切换,并没有交互性, 运用触控摆布滑动图片的轮播请猛戳俺的另一篇博客:原生JS完成滑动图片轮播

而JS方面则是经由过程猎取imgs数组,轮播个中寄存图片的div, 要领是掌握图片div的class。
空话不多说,上代码:

HTML(后插进去的图片显现在前):

<div id="imgs">
  <div id="bg1" class="bg"></div>
  <div id="bg2" class="bg"></div>
</div>

CSS:

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
  opacity:0;

}

#bg1 {
  background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;
  background-size: cover;
  
}

#bg2 {
  background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;
  background-size: cover;
}

.fadein {
  opacity: 100;
  filter: alpha(opacity=100);
}

JS:

// 替代class到达淡入淡出的结果
function fadeIn(e) {
  e.className = "bg fadein"
};

function fadeOut(e) {
  e.className = "bg"
};
//说明图片数组中当前的轮播图片
cur_img = document.getElementById("imgs").children.length - 1;
//图片轮播函数
function turnImgs(imgs) {
    var imgs = document.getElementById("imgs").children;
    if (cur_img == 0) {
      fadeOut(imgs[cur_img]);
      cur_img = imgs.length - 1;
      fadeIn(imgs[cur_img]);
    } else {
      fadeOut(imgs[cur_img]);
      fadeIn(imgs[cur_img - 1]);
      cur_img--;
    }
  }
  //设置轮播距离
setInterval(turnImgs, 3000);

demo中只用了两张图片,假如须要插进去更多的图片,能够在id=“imgs”的div中到场一个新的子div ,class加上bg即可,然后在CSS中到场该div的形貌,比方HTML中到场<div id="bg3" class="bg"></div>,然后CSS中则到场

#bg3 {
  background: url(图片地点) no-repeat;
  background-size: cover;
} 

即可。

    原文作者:囧囧
    原文地址: https://segmentfault.com/a/1190000003067215
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞