月光林地的網頁技術部

網頁課程教材

0%

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

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

MVIM-前台動畫輪播區

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

/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
44
45
46
47
48
49
<!--這區塊是用來做為動畫圖片顯示的區塊-->
<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();
    <?php 
        //取得所有啟用的輪播圖片
        $lins=$Mvim->all(['sh'=>1]);

        foreach($lins as $lin){
            //將圖片路徑存入陣列
            echo "lin.push('{$lin['img']}');";
            }
        ?>
    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='./img/" + lin[now] + "' style='width:99%; height:100%;'></embed>")
        
        //執行完上述程式後把now的值加1
        now++;

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

NEWS-前台最新消息區

前台首頁的最新消息需要根據消息筆數來做不同的顯示，我們將這個判斷邏輯寫在頁面中。
/front/main.php

1
2
3
4
5
6
7
8
9
10
<span class="t botli">最新消息區
    <?php
    //判斷資料表中設為顯示的資料筆數是否超過5筆
    if($News->count(['sh'=>1])>5){

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

最多顯示五筆最新消息，在語法中限制要取用的資料筆數並顯示出來。
/front/main.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul class="ssaa" style="list-style-type:decimal;">
<?php
    //撈出前五筆設為顯示的資料
    $news=$News->all(['sh'=>1],' limit 5');

    //將資料逐筆輸出
    foreach($news as $n){
        echo "<li>";

        //利用mb_substr()只取字串前20個字
        echo mb_substr($n['text'],0,20);
        
        //建立一個帶有class='all'的標籤，內容是全部的文字內容
        //這個標籤預設為不顯示                
        echo "<div class='all' style='display:none'>";
        echo $n['text'];
        echo "</div>";
        echo "...</li>";
    }
?>
</ul>

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