CSS3 フェードインおよびフェードアウト効果に基づく画像カルーセル_html/css_WEB-ITnose

インターネット上のフェードイン・フェードアウトエフェクトの多くはjsを使ってjqueryのfadeIn・fadeOutの考え方に従って要素の透明度を制御していますが、若干のラグがあり動作効率が低いのが欠点です。平均。 もう 1 つのアイデアは、事前定義された CSS スタイルを通じて透明度の遷移を制御することです。この方法は滑らかな遷移を持ち、遷移効果は CSS3 アニメーションに基づいているため、より効率的です。 アイデアは、フェードインとフェードアウトの効果を事前定義されたスタイル クラスに作成し、JS を使用して要素のクラスを変更して画像カルーセルを実現することです。

オンライン デモ表示
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: 100vw;  height: 100vh;}#bg1 {  background: url(http://pfile.cn/11n0lc) no-repeat;  background-size: cover;  -webkit-transition: opacity 2s linear;  -moz-transition: opacity 2s linear;  -o-transition: opacity 2s linear;  transition: opacity 2s linear;}#bg2 {  background: url(http://pfile.cn/emebgq) no-repeat;  background-size: cover;  -webkit-transition: opacity 2s linear;  -moz-transition: opacity 2s linear;  -o-transition: opacity 2s linear;  transition: opacity 2s linear;}.fadein{    opacity:100;}.fadeout{    opacity:0;}

JS:

function fadeIn(e) {  e.className = "bg fadein"};function fadeOut(e) {  e.className = "bg fadeout"};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, 2000);

さらに画像を挿入する必要がある場合は、id="imgs" を使用して div に新しいサブ div を追加します。 bg をクラスに追加し、HTML に

のように div の説明を CSS に追加し、CSS に #bg2 {
background: url(image address) no-repeat;
background-size: cover ;
-webkit-transition : 不透明度 2 秒の線形;
-moz-transition: 不透明度 2 秒の線形;
-o-transition: 不透明度 2 秒の線形;
トランジション: 不透明度 2 秒の線形;
}。