影像輪播

HTML & CSS 部份 【結果如區段一的背景影像輪播展示】

<section class="page page1">
    <div class="page1bg page1bg1"></div>
    <div class="page1bg page1bg2"></div>
    <div class="page1bg page1bg3"></div>
    <div class="page1bg page1bg4"></div>
</section>

<style>
    .page1bg{ position:absolute; width:100%; height:100%; top:0; left:0;
              background-size:cover; background-position:center; display:none; }
    .page1bg1{ background-image:url(images/photo1.jpg); }
    .page1bg2{ background-image:url(images/photo2.jpg); }
    .page1bg3{ background-image:url(images/photo3.jpg); }
    .page1bg4{ background-image:url(images/photo4.jpg); }
</style>

JavaScript & jQuery 部份

<script src="js/jquery-xxxx.min.js" > </script>

<script>

//變數宣告區=============================================================
var page1bgNo=-1;       //負責page1目前畫面呈現的背景的索引號碼(0代表第1張)

//page1影像輪播----------------------------------------------------------
//偵測.page1中class名稱為page1bg的length"總數量"
//alert($('.page1 .page1bg').length);

function page1show(){
    //讓目前畫面上的影像以1秒的時間淡出
    $('.page1 .page1bg').eq(page1bgNo).fadeOut(1000);
    
    //準備下一張
    page1bgNo++;
    if( page1bgNo == $('.page1 .page1bg').length ){ page1bgNo = 0; }
    
    //讓下一張以1秒的時間淡入
    $('.page1 .page1bg').eq(page1bgNo).fadeIn(1000);
}

page1show();    //馬上執行一次page1show()函式
setInterval(page1show,5000);    //設定每隔5秒之後執行一次page1show的函式

</script>