Slideshow互動式影像切換播放
2020/05/13閱讀時間約 2 分鐘
提供快速建立可自動撥放與互 動控制的大圖瀏覽方式，除了播放控制外，下 方將包含小圖的快速瀏覽切換。
STEP1.
開啟範例練習檔dw11.html與dw11-imageslideshow.html，點取dw11.html原內容區影像（尺 寸為690x500）並直接刪除。
開啟範例練習檔dw11.html與dw11-imageslideshow.html，點取dw11.html原內容區影像（尺 寸為690x500）並直接刪除。
至dw11-imageslideshow.html內直接複製所需CSS 與 Javasccript 檔連接，至dw11.html並貼入於</head>之前:
以及主要內容於dw11.html內容區<td>(原刪除圖片區)之內:
STEP2.
依序直接更改圖片內容原始檔與連結圖檔為其對應大圖，若要增加圖片內容請至程式碼直接增加完整一組<li>…</li>，包括更改title（將顯示於相片右上角）與alt，圖片部分是由「<li><a href="大圖" title="圖說"><img src="小圖" /></a></li>」所構成，唯獨尺寸與內容區不符合，因此版面更略為破損，需要更改CSS 屬性設定。
依序直接更改圖片內容原始檔與連結圖檔為其對應大圖，若要增加圖片內容請至程式碼直接增加完整一組<li>…</li>，包括更改title（將顯示於相片右上角）與alt，圖片部分是由「<li><a href="大圖" title="圖說"><img src="小圖" /></a></li>」所構成，唯獨尺寸與內容區不符合，因此版面更略為破損，需要更改CSS 屬性設定。
STEP3.
對於外觀屬性部分，可以至 CSS(slideshow.css) 找到【#ImageSlideShow】 width:688px（border 邊框 1px，寬需要 減去 2）；高度部分因考慮下方小圖內容尺 寸，約需減去 150，請更改【#ImageSlideShow .ISSClip 與 #ImageSlideShow .ISSControls】height:350px。
對於外觀屬性部分，可以至 CSS(slideshow.css) 找到【#ImageSlideShow】 width:688px（border 邊框 1px，寬需要 減去 2）；高度部分因考慮下方小圖內容尺 寸，約需減去 150，請更改【#ImageSlideShow .ISSClip 與 #ImageSlideShow .ISSControls】height:350px。
即可儲存檔案後預覽檢視，可暫停、繼續、前後切換，也可以按下下方小圖直接檢視，超過預設張數的影像將延續至下一頁畫面，請按下下方小圖左右兩側的按鈕即可切換。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
留言0
查看全部