月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組一 步驟18 完成前台動畫圖片輪播及最新消息顯示

發表於 更新於 歸屬於 ， ，
  • 首頁的動畫及最新消息只需要修改 /view/front/main.php
  • 搬移動畫 <script> 的位置到動畫區塊後面，不然會發生畫面先空白三秒才開始輪播的問題
  • 要在網頁載入後先寫入第一張動畫圖片，不然動畫區塊會先呈現空白
  • 最新消息區要先判斷需要顯示的筆數是否超過五筆，決定是否會出現”more…”文字連結
  • 處理最新消息的字串以配合內建JS的彈出視窗功能

MVIM-前台動畫輪播區

我們一樣先在類別中撰寫要在前台顯示的資料，之後再去處理畫面的內容
/Controller/Mvim.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 建立一個show()方法，這個方法會在頁面上輸出lin.push()這個js函式
 */
function show(){

    //取出所有設為顯示的資料
    $rows=$this->all(['sh'=>1]);

    //使用迴圈在頁面上輸出圖檔路徑
    //並放在js函式 array.push()中
    foreach($rows as $row){
    ?>
        lin.push("./upload/<?=$row['img'];?>");
    <?php
    }
}

front/main.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div style="width:100%; padding:2px; height:290px;">
    <div id="mwww" loop="true" style="width:100%; height:100%;">
        <div style="width:99%; height:100%; position:relative;" class="cent">沒有資料</div>
    </div>
</div>
<!--把原本放在較前面的javascript程式碼搬到輪播區的後面-->
<script>
var lin = new Array();

    //執行物件中的show()方法，此方法會讓動畫圖片的路徑加入到陣列中
    <?php $Mvim->show(); ?>; 

var now = 0; //宣告當前的圖片位置
ww()   //先執行一次，讓第一張動畫圖片可以立即顯示在畫面上

//如果陣列中有超過一張以上的動畫圖片就會開始輪播
if (lin.length > 1) {

    //建立一個固定時間會循環執行的計時器
    //每隔3秒會執行一次ww()這個函式
    setInterval("ww()", 3000);

    //把now改成1。因為前面ww()執行時index為0的圖片已經顯示過了
    //3秒後要顯示的應該是index為1的圖片
    now = 1;  
}

//建立ww()函式
function ww() {

    //在畫面上id為mwww的元件中要寫入一串html內容
    //這一串html內容中最重要的是取得陣列lin中的指定位置的動畫圖片路徑
    $("#mwww").html("<embed loop=true src='" + lin[now] + "' style='width:99%; height:100%;'></embed>")

    //執行完上述程式後把now的值加1
    now++;

    //判斷now的值有沒有超過陣列lin的長度
    //如果超過陣列長度，則把now重置為0
    if (now >= lin.length)
        now = 0;
}
</script>

NEWS-前台最新消息區

前台首頁的最新消息需要根據消息筆數來做不同的顯示，我們將這個判斷邏輯寫在類別中，這樣前台就只要執行這個方法就可以了。
/Controller/News.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function more(){
    //判斷資料表中設為顯示的資料筆數是否超過5筆
    if($this->count(['sh'=>1])>5){

        //如果超過5筆就輸出more連結，導向更多消息頁面　
        echo "<a href='?do=news' style='float:right'>";
        echo "More...";
        echo "</a>";
    }
}

function show(){

    //撈出前五筆設為顯示的資料
    $rows=$this->all(['sh'=>1]," limit 5");

    //將資料輸出
    foreach($rows as $row){
        echo "<li>";

        //利用mb_substr()只取字串前20個字
        echo mb_substr($row['text'],0,20);

        //建立一個帶有class='all'的標籤，內容是全部的文字內容
        //這個標籤預設為不顯示
        echo "<span class='all' style='display:none'>";
        echo $row['text'];
        echo "</span>";
        echo "</li>";
    }
}

front/main.php

1
2
3
4
5
6
7
8
9
10
<div style="width:95%; padding:2px; height:190px; margin-top:10px; padding:5px 10px 5px 10px; 
border:#0C3 dashed 3px; position:relative;">
        <span class="t botli">最新消息區
            <!--執行物件中的more()方法來決定畫面上要不要顯示more...連結-->
            <?=$News->more();?>
        </span>
        <ul class="ssaa" style="list-style-type:decimal;">
        <!--執行物件中的show()方法來顯示最多五筆最新消息-->
        <?php $News->show();?>
        </ul>

版型檔案本身有附新聞的彈出視窗，如果程式執行都正確，那麼滑鼠滑過每則新聞時，右側都會出現完整最新消息的彈出視窗。