可快速加入包含多樣自動影像播放效果,準備好與要加入內容區相同尺寸的多張影像即可。
STEP1.
開啟範例練習檔dw09.html與dw09-jQueryCycle.html, 在dw09.html內刪除原內容區影像。
再至dw09-jQueryCycle.html內直接複選並貼入所需 CSS 與 Javasccript 檔連接於dw09.html的</head>之前:
以及dw09-jQueryCycle.html程式碼<body>內的內容,複製並至dw09.html的內容區(刪去圖片的)<td>之內貼上:
STEP2.
更改撥放器尺寸 width:563px、height:380px:
接著更改撥放影像內容,首先可選擇刪去【<div title=”sample title”>……</div>】為文字說明內容,再更改所要撥放影像檔案名稱(dw09p1.jpg~ dw09-p6.jpg)、尺寸與成為圖說文字的 title 即可。
儲存檔案預覽即可檢視到圓角矩形的圖框,左下角的說明文字顏色須修正。
STEP3.
最後就是可以更改圖外框顏色與左下角圖說文字顏色,請至 CSS 設計工具控制板上選取【#slideshow-caption】更改 color 文字顏色;選取【#slideshow img, #slideshow div】更改background-color 即是邊框顏色。
儲存檔案預覽即可檢視。