圖片切換效果
阿新 • • 發佈：2019-02-04
1、準備一組圖片，最好大小一致，檔案的命名相似，如：pic1.jpg、pic2.jpg、pic3.jpg；
2、在網頁中插入一個2×3的表格，表格的寬度與你的圖片寬度一致；
3、把表格的第一行的叄個單元格合併，並在其中插入第一張圖片，把圖片命名為“imag1”，這一點很重要，這是以後替換圖片的標識；
4、在表格的第二行的左右兩個單元格中分別插入兩個按鈕，一個這“下一張”，一個為“上一張”。在“下一張”按鈕的程式碼中加上程式碼：onclick="img(1)"，在“下一張”按鈕的程式碼中加上程式碼：onclick="img(2)"。其作用是當相應的按鈕按下時執行相應的函式實現切換圖片的功能。在表格第二行中間那個單元格中寫上“第一張”，並在該段文字的前後加上一個<span>標記，在其中加上程式碼：id="picnum"，這樣做的目的是給這段文字加一個標識，以便動態替換。
5、在網頁程式碼的<head>與</head>之間插入以下程式碼：
<Script LANGUAGE="JavaScript">
<!--
var num=1 //設定圖片數初始值
var nummax=3 //圖片數，可根據實際數更改
function img(sta)
{
obj=eval("img1");
objnum=eval("picnum");
if (obj.filters.item(0).Transition==23) // 這部分語句是用於改變切換樣式，在23種樣式中迴圈。
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (sta==1) //以下部分用於切換圖片和更新當前顯示的圖片號
num=num+1
else num=num-1
if (num>nummax) num=1
if (num<1) num=nummax
obj.src="
obj.filters.item(0).Play();//顯示切換圖片時的濾鏡效果
objnum.innerText="第"+num+"張";//更新圖片數
}
//-->
</SCRIPT>
以上是實現圖片切換的主要函式，除標明可以的外可以不必更改。
5、表格、圖片及按鈕部分的程式碼如下：
<table width="200" border="1" align="left" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3" scope="col"><img src="http;//fym888.nease.net/image/cssp1.jpg" name="img1" width="200" height="134" id="img1" style="filter:revealTrans(Transition=1,Duration=1.5)"></th>
</tr>
<tr>
<td width="57"><input name="Submit" type="button" value="下一張" onclick="img(1)"></td>
<td width="82"><div align="center"><span id="picnum">第1張</span></div></td>
<td width="57"><div align="right">
<input type="submit" name="Submit" value="上一張" onclick="img(2)">
</div></td>
</tr>
</table>
上面的紅字部分可以根據實際情況改寫
2、在網頁中插入一個2×3的表格，表格的寬度與你的圖片寬度一致；
3、把表格的第一行的叄個單元格合併，並在其中插入第一張圖片，把圖片命名為“imag1”，這一點很重要，這是以後替換圖片的標識；
4、在表格的第二行的左右兩個單元格中分別插入兩個按鈕，一個這“下一張”，一個為“上一張”。在“下一張”按鈕的程式碼中加上程式碼：onclick="img(1)"，在“下一張”按鈕的程式碼中加上程式碼：onclick="img(2)"。其作用是當相應的按鈕按下時執行相應的函式實現切換圖片的功能。在表格第二行中間那個單元格中寫上“第一張”，並在該段文字的前後加上一個<span>標記，在其中加上程式碼：id="picnum"，這樣做的目的是給這段文字加一個標識，以便動態替換。
5、在網頁程式碼的<head>與</head>之間插入以下程式碼：
<Script LANGUAGE="JavaScript">
<!--
var num=1 //設定圖片數初始值
var nummax=3 //圖片數，可根據實際數更改
function img(sta)
{
obj=eval("img1");
objnum=eval("picnum");
if (obj.filters.item(0).Transition==23) // 這部分語句是用於改變切換樣式，在23種樣式中迴圈。
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (sta==1) //以下部分用於切換圖片和更新當前顯示的圖片號
num=num+1
else num=num-1
if (num>nummax) num=1
if (num<1) num=nummax
obj.src="
obj.filters.item(0).Play();//顯示切換圖片時的濾鏡效果
objnum.innerText="第"+num+"張";//更新圖片數
}
//-->
</SCRIPT>
以上是實現圖片切換的主要函式，除標明可以的外可以不必更改。
5、表格、圖片及按鈕部分的程式碼如下：
<table width="200" border="1" align="left" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3" scope="col"><img src="http;//fym888.nease.net/image/cssp1.jpg" name="img1" width="200" height="134" id="img1" style="filter:revealTrans(Transition=1,Duration=1.5)"></th>
</tr>
<tr>
<td width="57"><input name="Submit" type="button" value="下一張" onclick="img(1)"></td>
<td width="82"><div align="center"><span id="picnum">第1張</span></div></td>
<td width="57"><div align="right">
<input type="submit" name="Submit" value="上一張" onclick="img(2)">
</div></td>
</tr>
</table>
上面的紅字部分可以根據實際情況改寫