利用animate結合圖片切換slider

利用animate結合圖片切換slider

1.CSS【animation】與背景的結合

運用div在CSS中利用@keyframes置換背景圖片的方法,但此方法在firefox瀏覽器中無法利用背景換圖片。(課程範例說明)

CSS3 動畫:animation(連結)

CSS3,創建動畫,它可以取代許多網頁動畫圖像,Flash動畫,和JAVAScripts

CSS美化

2.在html加入圖片,利用animation屬性opacity顯示圖片

結果連結

Step1:html結構

<div id="slider">
    <img src="image/banner01.jpg" alt="">
    <img src="image/banner02.jpg" alt="">
    <img src="image/banner03.jpg" alt="">
    <img src="image/banner04.jpg" alt="">
</div>
<div>內容顯示</div>

 

Step2:CSS美化

 

#slider img{
  /*照片符合螢幕寬度*/ 
     width: 100%;
  /*照片全部定位至(0,0) 重疊在一起*/
     position: absolute; left: 0; top: 0; 
  /*照片全部都透明,利用animatin CSS照片顯示*/
     opacity: 1; 
}
#slider img:nth-child(1){ animation: img1 3s infinite;}
#slider img:nth-child(2){ animation: img2 3s infinite;}
#slider img:nth-child(3){ animation: img3 3s infinite;}
#slider img:nth-child(4){ animation: img4 3s infinite;}

@keyframes img1{
    0%{opacity: 1;}
}
@keyframes img2{
    0%{opacity: 0;}
    45%{opacity: 1;}
}
@keyframes img3{
    0%{opacity: 0;}
    45%{opacity: 0;}
    70%{opacity: 1;}
}
@keyframes img4{
    0%{opacity: 0;}
    45%{opacity: 0;}
    70%{opacity: 0;}
    100%{opacity: 1;}
}

Step3:jQuery判斷照片的高度

因#slider之下圖片利用position:absolut;照片全部定位至(0,0) 重疊在一起,導致父區域【#slider】高度為0,若後續有其他內容時,會被#slider蓋住,需要利用jQuery辨斷照片高度

//判斷圖片寬度代入 $sliderW變數
//因圖片height:auto; 無法偵測圖片高度,故改偵測圖片寬度
var $sliderW = $('#slider img').width();
// alert($sliderW);
// 計算原始圖片長寬比(範例長寬比1920x560),計算現在圖片的寬度
//判斷圖片高度代入 $sliderW變數
var $sliderH =  $sliderW /(1920/560);
//  alert($sliderH);
// 將圖片高度,置入父區域#slider高度
$('#slider').css('height',$sliderH);

Step4:當視窗縮放時,圖片高度會改變,但#slider的高度不會改變,利用jQuery偵測改變

//因function不會自動執行
    slider();
 //當視窗縮放時執行,計算#slider高度     
    $(window).resize(function(){
        slider()
    });

 //將Step3中計算#slider高度,包在function中重覆執行
    function slider(){
        var $sliderW = $('#slider img').width();
        var $sliderH =  $sliderW /(1920/560);
        $('#slider').css('height',$sliderH);
    }