[技能檢定]題組一 步驟19 完成校園映像檔輪播功能

版型檔案己經有提供了js程式來做圖片輪播的功能，不過程式本身有點小BUG，最後三張圖片有可能不會出現，這個問題可修可不修，現場評核時只看功能有沒有做出來，不會去驗證程式的小問題，所以我們要做的就是把圖片讀出來，然後讓JS程式去控制要顯示那幾張圖片。

內建程式的原理是先把圖片都讀出來後，都先設為隱藏，然後只顯示三張圖片，之後當點擊上下按鈕時，再去計算現在在第幾頁的位置，依此算出畫面上應該出現那三張圖片。

在讀出圖片時，需要在HTML的標籤中加入id序號來為每張圖片做記號，程式會去計算要顯示的圖片id，然後再使用 jQuery 的 $(id).show() 來讓圖片顯示出來。

內建程式問題出在計算當前頁的公式上，只要修改一下計算方式就可以正常輪播全部的圖片了。

IMAGE-前台校園映像資料圖片輪播區

<span class="t botli">校園映象區</span>
<!--建立一個div來放置向上icon，並註冊點擊時的動作-->
<div class="cent" onclick="pp(1)">
    <img src="./icon/up.jpg" alt="">
</div>
<?php
//取得全部設為顯示的圖片
$imgs=$Image->all(['sh'=>1]);

//利用迴圈來讀出圖檔名稱，並放置在html中對應的地方
foreach($imgs as $idx => $img){
?>
    <div id="ssaa<?=$idx;?>" class='im cent' >
                <!--依題目要求將圖片大小設為150px x 103px 大小-->
        <img src="./img/<?=$img['img'];?>" 
           style="width:150px;height:103px;border:3px solid orange;margin:3px">
    </div>
<?php  }  ?>
<!--建立一個div來放置向下icon，並註冊點擊時的動作-->
<div class="cent" onclick="pp(2)">
    <img src="./icon/dn.jpg" alt="">
</div>

var nowpage=1
    /**
     * num 變數是用來紀錄有多少張圖片要顯示用的，
     * 記得在PHP的標籤最後要加上;號，用來表示這一行js結束
     */
var num=<?=$Image->count(['sh'=>1]);?>;

function pp(x){
    var s,t;
    if(x==1 && nowpage-1>=0){ nowpage--; }

        //原本的js程式在向下輪播的判斷式中有錯，
        //將程式內容改成如下，才會正常輪播
    if (x == 2 && nowpage  < (num - 3) ) {
            nowpage++;
    }
    //先將所有的.im元素都隱藏起來
    $(".im").hide()

    //使用迴圈依據nowpage的值來決定那三張圖片要顯示
    for(s=0;s<=2;s++)
    {
        t=s*1+nowpage*1;
        $("#ssaa"+t).show()
    }
}
//頁面載入後先執行一次PP(1)，讓畫面只剩第一頁的三張圖
pp(1)