版型檔案己經有提供了js程式來做圖片輪播的功能，不過程式本身有點小BUG，最後三張圖片有可能不會出現，這個問題可修可不修，現場評核時只看功能有沒有做出來，不會去驗證程式的小問題，所以我們要做的就是把圖片讀出來，然後讓JS程式去控制要顯示那幾張圖片。
內建程式的原理是先把圖片都讀出來後，都先設為隱藏，然後只顯示三張圖片，之後當點擊上下按鈕時，再去計算現在在第幾頁的位置，依此算出畫面上應該出現那三張圖片。
在讀出圖片時，需要在HTML的標籤中加入id序號來為每張圖片做記號，程式會去計算要顯示的圖片id，然後再使用 jQuery 的 $(id).show() 來讓圖片顯示出來。
內建程式問題出在計算當前頁的公式上，只要修改一下計算方式就可以正常輪播全部的圖片了。
IMAGE-前台校園映像資料圖片輪播區
版型提供的js程式，需要知道全部的圖片有幾張，因此我們在類別中建立一個方法來回傳圖片的數量
1
2
3
4
|
function num(){
return $this->count(['sh'=>1]);
}
|
接著我們在類別中再建立一個方法用來回傳每張圖片顯示在畫面上時的html碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| function show(){
$rows=$this->all(['sh'=>1]);
foreach($rows as $idx => $row){
?>
<div class="im" id="ssaa<?=$idx;?>">
<!--根據題目規定，每張圖片為150px * 103px-->
<img src="./upload/<?=$row['img'];?>" style="width:150px;height:103px;border:3px solid orange;margin:2px">
</div>
<?php
}
}
|
在類別中建立完相關的方法後，就可以在頁面對應的位置來顯示圖片或資料
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div style="width:89%; height:480px;" class="dbor">
<span class="t botli">校園映象區</span>
<!--建立一個div來放置向上icon，並註冊點擊時的動作-->
<div class='cent' onclick="pp(1)">
<img src="./icon/up.jpg" alt="">
</div>
<!--執行物件中的show()方法來印出所有圖片的html碼-->
<?php $Image->show();?>
<!--建立一個div來放置向下icon，並註冊點擊時的動作-->
<div class='cent' onclick="pp(2)">
<img src="./icon/dn.jpg" alt="">
</div>
|
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
| var nowpage = 0,
num = <?=$Image->num();?>;
function pp(x) {
var s, t;
if (x == 1 && nowpage - 1 >= 0) {
nowpage--;
}
if (x == 2 && nowpage < (num - 3) ) {
nowpage++;
}
$(".im").hide()
for (s = 0; s <= 2; s++) {
t = s * 1 + nowpage * 1;
$("#ssaa" + t).show()
}
}
pp(1)
|