Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [講義] 輪播頂圖製作

討論區清單 文章列表
Changed By: JinJin
Change Date: June 04, 2015 12:08AM

[講義] 輪播頂圖版型製作製作頂圖製作
範例
http://ccnt1.cute.edu.tw/hphys/web/hphys/

[hr]

範例HTML原始碼


<!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /> <title>中國科技大學體育室</title><br /> <link href="style.css" type="text/css" rel="stylesheet" /><br /> </head><br /> <br /> <body><br /> <div id="header"><!--#header開始 --><br /> <ul id="menu"><br /> <li><b><a href="teacher.html">中國科技大學體育室</a></li><br /> <li><a href="index.html">最新消息</a></li><br /> <li><a href="info.html">行政資訊</a></li><br /> <li><a href="events.html">活動成果</a></li><br /> <li><a href="teach.html">體育教學</a></li><br /> <li><a href="space.html">運動設施</a></li><br /> <li><a href="time.html">場地開放時間</a></li><br /> <li><a href="role.html">法規辦法</a></li><br /> <li><a href="form.html">表格下載</a></li><br /> <li><a href="photo.html">體育室相簿</a></li><br /> </ul><br /> </div><br /> <br /> <div class="flexslider"><br /> <ul class="slides"><br /> <li style="background:url(image/img1.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img2.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img3.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img4.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img5.jpg) 50% 0 no-repeat;"></a></li> <br /> </ul><br /> </div><br /> <br /> </div><!--#header結束 --><br /> <br /> <div class="box1"><br /> <br /> <h2>中國科技大學體育室</h2><br /> <br /> <div class="sec1"><br /> 體育室主任：羅主任旭壯<br><br /> 台北校區電話：02-2931-3416#2149<br><br /> 新竹校區電話：03-699-1111#1318<br><br /> 單位電子郵件：phys@cute.edu.tw　</br><br /> </div><br /> <br /> <hr><br /> <br /> <h4>簡介</h4><br /> <p>1.設教學活動及場館器材兩組，每組業務由體育教師兼任，以襄室務之推行</p><br /> <p>2.配合教育部體育政策擬定本校中長程體育發展計畫</p><br /> <p>3.統整體育教學大綱與規範：編定體育教學課程內容和體育興趣選組排課作業</p><br /> <p>4.推廣全校師生體適能健康護照和規劃辦理學生與教職員工各項運動競賽與體育活動</p><br /> <p>5.各運動場館與體育器材管理與使用辦法之擬修訂與執行</p><br /> <p>6.襄辦體育評鑑與訪視各項規劃統籌之處理、執行與協調</p><br /> <p>7.其他體育相關業務</p><br /> <br /> </div><br /> <br /> <br /> <footer><br /> 中國科技大學體育室<br><br /> 臺北校區：臺北市文山區興隆路三段56號 電話：(02)2931-3416<br> <br /> 新竹校區：新竹縣湖口鄉中山路三段530號 電話：(03)699-1111<br><br /> 本網站之智慧財產權屬「中國科技大學體育室」所有，任何轉載、複製等利用，請預先取得本網站同意<br><br /> Copyright © 2014. China University of Technology All Rights Reserved.<br><br /> 瀏覽器建議使用IE 9.0以上版本 最佳觀看解析度1280x720<br /> </footer><br /> <br /> </body><br /> <br /> <script src="js/jquery.min.js"></script><br /> <script src="js/jquery.flexslider-min.js"></script><br /> <br /> <script><br /> $(function(){<br /> $('.flexslider').flexslider({<br /> directionNav: true,<br /> pauseOnAction: false<br /> });<br /> });<br /> <br /> </script><br /> <br /> </body><br /> </html>

[hr]

其他參考教學


JQUERY 滾動插件─FLEXSLIDER 筆記教學
http://blog.reve.tw/flexslider/

Flexslider圖片輪播、文字圖片相结合滑動切换效果
http://www.helloweba.com/view-blog-265.html

Original Message

作者: JinJin
Date: June 04, 2015 12:07AM

[講義] 輪播頂圖版型製作頂圖製作
範例
http://ccnt1.cute.edu.tw/hphys/web/hphys/

[hr]

範例HTML原始碼


<!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /> <title>中國科技大學體育室</title><br /> <link href="style.css" type="text/css" rel="stylesheet" /><br /> </head><br /> <br /> <body><br /> <div id="header"><!--#header開始 --><br /> <ul id="menu"><br /> <li><b><a href="teacher.html">中國科技大學體育室</a></li><br /> <li><a href="index.html">最新消息</a></li><br /> <li><a href="info.html">行政資訊</a></li><br /> <li><a href="events.html">活動成果</a></li><br /> <li><a href="teach.html">體育教學</a></li><br /> <li><a href="space.html">運動設施</a></li><br /> <li><a href="time.html">場地開放時間</a></li><br /> <li><a href="role.html">法規辦法</a></li><br /> <li><a href="form.html">表格下載</a></li><br /> <li><a href="photo.html">體育室相簿</a></li><br /> </ul><br /> </div><br /> <br /> <div class="flexslider"><br /> <ul class="slides"><br /> <li style="background:url(image/img1.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img2.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img3.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img4.jpg) 50% 0 no-repeat;"></a></li><br /> <li style="background:url(image/img5.jpg) 50% 0 no-repeat;"></a></li> <br /> </ul><br /> </div><br /> <br /> </div><!--#header結束 --><br /> <br /> <div class="box1"><br /> <br /> <h2>中國科技大學體育室</h2><br /> <br /> <div class="sec1"><br /> 體育室主任：羅主任旭壯<br><br /> 台北校區電話：02-2931-3416#2149<br><br /> 新竹校區電話：03-699-1111#1318<br><br /> 單位電子郵件：phys@cute.edu.tw　</br><br /> </div><br /> <br /> <hr><br /> <br /> <h4>簡介</h4><br /> <p>1.設教學活動及場館器材兩組，每組業務由體育教師兼任，以襄室務之推行</p><br /> <p>2.配合教育部體育政策擬定本校中長程體育發展計畫</p><br /> <p>3.統整體育教學大綱與規範：編定體育教學課程內容和體育興趣選組排課作業</p><br /> <p>4.推廣全校師生體適能健康護照和規劃辦理學生與教職員工各項運動競賽與體育活動</p><br /> <p>5.各運動場館與體育器材管理與使用辦法之擬修訂與執行</p><br /> <p>6.襄辦體育評鑑與訪視各項規劃統籌之處理、執行與協調</p><br /> <p>7.其他體育相關業務</p><br /> <br /> </div><br /> <br /> <br /> <footer><br /> 中國科技大學體育室<br><br /> 臺北校區：臺北市文山區興隆路三段56號 電話：(02)2931-3416<br> <br /> 新竹校區：新竹縣湖口鄉中山路三段530號 電話：(03)699-1111<br><br /> 本網站之智慧財產權屬「中國科技大學體育室」所有，任何轉載、複製等利用，請預先取得本網站同意<br><br /> Copyright © 2014. China University of Technology All Rights Reserved.<br><br /> 瀏覽器建議使用IE 9.0以上版本 最佳觀看解析度1280x720<br /> </footer><br /> <br /> </body><br /> <br /> <script src="js/jquery.min.js"></script><br /> <script src="js/jquery.flexslider-min.js"></script><br /> <br /> <script><br /> $(function(){<br /> $('.flexslider').flexslider({<br /> directionNav: true,<br /> pauseOnAction: false<br /> });<br /> });<br /> <br /> </script><br /> <br /> </body><br /> </html>

[hr]

其他參考教學


JQUERY 滾動插件─FLEXSLIDER 筆記教學
http://blog.reve.tw/flexslider/

Flexslider圖片輪播、文字圖片相结合滑動切换效果
http://www.helloweba.com/view-blog-265.html