jQuery cycle 影像自動播放效果

閱讀時間約 1 分鐘
可快速加入包含多樣自動影像播放效果,準備好與要加入內容區相同尺寸的多張影像即可。
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 即是邊框顏色。
儲存檔案預覽即可檢視。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
此擴充元件提供圖片另外一種瀏覽的方式,即是以滑鼠移動檢視局部放大的瀏覽效果,只要準備小圖與放大圖,即可快速加入此效果於頁面上。 STEP1. 開啟範例練習檔dw08.html,再新增一空白檔案為 dw08-iframe.html,為要插入『jqzoom』元件。直接由dw08-jqzoom.html
可應用在 AP 元素(DIV)內的影像水平滑動切換,搭配巢狀 AP 元素(DIV)與內嵌式頁框,媲美 Animate 互動瀏覽影像效果。 A.加入 AP DIV 於頁面上 在 Dreamweaver 中,要加入 AP  DIV 除了設定 CSS 外,更簡單的方式是使用繪製 AP  DIV 工具,
網頁除了自動捲動的文字方式外,還可以製作出更捲動控制的內容,當滑鼠在捲動按鈕上時,內容就會互動捲動,這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置,當無法固定位置時(如頁面置中),就需要藉由內嵌式頁框的方式與版面整合。 STEP1. 開啟範例練習檔,已經處理完成版面內容的水平置中,內
影像瀏覽除了播放與控制播放外,最完美的還需要可以點圖直接開啟顯示大圖,接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件,由小圖切換瀏覽圖片,按下小圖,相對應大圖會在旁顯示。 STEP1. 開啟「dw05.html」檔,由切割存出的HTML 檔,左側空白處為要插入小圖與切 換右側大圖的
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
此擴充元件提供圖片另外一種瀏覽的方式,即是以滑鼠移動檢視局部放大的瀏覽效果,只要準備小圖與放大圖,即可快速加入此效果於頁面上。 STEP1. 開啟範例練習檔dw08.html,再新增一空白檔案為 dw08-iframe.html,為要插入『jqzoom』元件。直接由dw08-jqzoom.html
可應用在 AP 元素(DIV)內的影像水平滑動切換,搭配巢狀 AP 元素(DIV)與內嵌式頁框,媲美 Animate 互動瀏覽影像效果。 A.加入 AP DIV 於頁面上 在 Dreamweaver 中,要加入 AP  DIV 除了設定 CSS 外,更簡單的方式是使用繪製 AP  DIV 工具,
網頁除了自動捲動的文字方式外,還可以製作出更捲動控制的內容,當滑鼠在捲動按鈕上時,內容就會互動捲動,這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置,當無法固定位置時(如頁面置中),就需要藉由內嵌式頁框的方式與版面整合。 STEP1. 開啟範例練習檔,已經處理完成版面內容的水平置中,內
影像瀏覽除了播放與控制播放外,最完美的還需要可以點圖直接開啟顯示大圖,接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件,由小圖切換瀏覽圖片,按下小圖,相對應大圖會在旁顯示。 STEP1. 開啟「dw05.html」檔,由切割存出的HTML 檔,左側空白處為要插入小圖與切 換右側大圖的
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
渦輪引擎是依據布雷頓循環而設計的設備,藉此熱力循環說明增加壓縮比及燃燒溫度對渦輪引擎性能的了解
Thumbnail
給定一個Linked list鏈結串列的Head node, 請判斷這條Linked list是否存在環路(Cycle)? 如果有環路,回傳True。 如果沒有,回傳False。
Thumbnail
輪胎轉動是用spin還是rotate?繞圓環是用turn、circle還是cycle?芭蕾舞轉圈、轉陀螺、開車轉彎、轉方向盤、滑鼠的鼠標轉圈圈到底要用哪個英文字?circle和cycle哪裡不同?如果你被煩到暈了,這篇用超清楚的規則幫你一次搞定。
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
星期一的下午,是連著兩堂的全能踏板(家豪)+E-CYCLE肌力循環(Mixer)。每次要上全能踏板都很開心很期待,因為這是本季我一個星期開始的第一堂課,又是很喜歡的老師,再加上音樂好聽,搭配基本有氧舞步的動作也超優美讓人超喜歡。 今天的我也突然發現,在踏板跳上跳下的弓箭步蹲跳和深蹲跳對我來說好像變得
今日上課打卡-全能踏板+E-Cycle肌力循環 星期一之所以令人引頸期盼,就是因為有家豪的全能踏板和Mixer的E-Cycle歡樂循環(啊,不對,是肌力循環),而且這兩堂課連在一起的,在體能的調度上也搭配的天衣無縫,剛好讓我可以把力氣用完甘願回家。 最近這兩堂課,家豪中場都會問我們等一下要輕鬆一點
今天早上去上新一季飛輪課第二堂--E-Cycle耐力循環,老師是Mango。記得上一季的飛輪初體驗,第二堂也是E-Cycle耐力循環,不過其實我覺得課名真的不是重點,因為音樂有時老師會自選,只是課程的設計上會採用的動作和頻率會依耐力、肌力、間歇等目的而有不同而已,而且真的要上很多堂,對課程型式熟悉了
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
渦輪引擎是依據布雷頓循環而設計的設備,藉此熱力循環說明增加壓縮比及燃燒溫度對渦輪引擎性能的了解
Thumbnail
給定一個Linked list鏈結串列的Head node, 請判斷這條Linked list是否存在環路(Cycle)? 如果有環路,回傳True。 如果沒有,回傳False。
Thumbnail
輪胎轉動是用spin還是rotate?繞圓環是用turn、circle還是cycle?芭蕾舞轉圈、轉陀螺、開車轉彎、轉方向盤、滑鼠的鼠標轉圈圈到底要用哪個英文字?circle和cycle哪裡不同?如果你被煩到暈了,這篇用超清楚的規則幫你一次搞定。
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
星期一的下午,是連著兩堂的全能踏板(家豪)+E-CYCLE肌力循環(Mixer)。每次要上全能踏板都很開心很期待,因為這是本季我一個星期開始的第一堂課,又是很喜歡的老師,再加上音樂好聽,搭配基本有氧舞步的動作也超優美讓人超喜歡。 今天的我也突然發現,在踏板跳上跳下的弓箭步蹲跳和深蹲跳對我來說好像變得
今日上課打卡-全能踏板+E-Cycle肌力循環 星期一之所以令人引頸期盼,就是因為有家豪的全能踏板和Mixer的E-Cycle歡樂循環(啊,不對,是肌力循環),而且這兩堂課連在一起的,在體能的調度上也搭配的天衣無縫,剛好讓我可以把力氣用完甘願回家。 最近這兩堂課,家豪中場都會問我們等一下要輕鬆一點
今天早上去上新一季飛輪課第二堂--E-Cycle耐力循環,老師是Mango。記得上一季的飛輪初體驗,第二堂也是E-Cycle耐力循環,不過其實我覺得課名真的不是重點,因為音樂有時老師會自選,只是課程的設計上會採用的動作和頻率會依耐力、肌力、間歇等目的而有不同而已,而且真的要上很多堂,對課程型式熟悉了