欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

青島星網開發會員登錄注冊頁面的時候，想實現頁面大背景自動漸變切換，不想引用JQ因為太大，就用JS+CSS3用很少的代碼實現了一個，下面跟大家分享代碼。

頁面放背景圖片的HTML代碼

這是2個背景圖片切換，如果你想用3個或4個圖片切換，增加里面的div即可，把ID=bg+數，遞增即可。當然CSS里面也要相應的寫上圖片哦。

CSS部分代碼

css;toolbar:false;">.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(img/1.jpg) no-repeat;background-size:cover}
#bg2{background:url(img/2.jpg) no-repeat;background-size:cover}
.fadein{opacity:100;filter:alpha(opacity=100)}

如果前面HTML增加了圖片，記得在這里添加相應的圖片背景哦。

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);

至此已經實現了大背景自動切換漸變。

缺點：用于使用了CSS3，導致低版本的IE瀏覽器不支持。

如果想兼容所有瀏覽器可以使用JQ來編寫，大家可以參考：實現支付寶首頁背景圖片切換 這個是我照著支付寶的首頁切換扒下來的，可以兼容所有瀏覽器，只是JQ插件太大，我選擇了本文介紹簡易方法實現。

實際項目應用參考地址： 大家看看 大背景自動切換，是不是很酷哦。

喜歡簡單的可以用我這個方法css 背景圖片自動切換，喜歡兼容全部的就用前面JQ的實現方式css 背景圖片自動切換，都是一樣的效果哦。