網上的淡入淡出效果大多是依照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;
}
即可。