簡單來說，要引用 jQuery Plugin的步驟非常簡單，只需加一行<script type="text/javascript" src="plug_name.js"></script>引用Plugin程式檔，$("...")就多了新的Method可用。
【Cycle】
輪播效果Plugin，可以做出投影片放映或廣告輪播般的效果。
有洗牌、放大、淡出、下翻、翻面、捲動等效果，很適合做照片或廣告的輪播展示。
載入jquery.cycle.js後，只要在網頁中用<div>或其他容器元素將多個<img>包起來，接著$("#myDiv").cycle("shuffle")就大功告成，如以下範例:
----------------------------
<html >
<head>
<script src="../jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.cycle.js" type="text/javascript"></script>
<style type="text/css">
body { background-color: #222222; }
#myDiv { margin: 50px; }
#myDiv img { border: solid 5px white }
</style>
</head>
<body>
<div id="myDiv">
<img src="Pic01.JPG" />
<img src="Pic02.JPG" />
<img src="Pic03.JPG" />
<img src="Pic04.JPG" />
<img src="Pic05.JPG" />
</div>
<script type="text/javascript">
$(function() { $("#myDiv").cycle("shuffle"); });
</script>
</body>
</html>
<html >
<head>
<script src="../jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.cycle.js" type="text/javascript"></script>
<style type="text/css">
body { background-color: #222222; }
#myDiv { margin: 50px; }
#myDiv img { border: solid 5px white }
</style>
</head>
<body>
<div id="myDiv">
<img src="Pic01.JPG" />
<img src="Pic02.JPG" />
<img src="Pic03.JPG" />
<img src="Pic04.JPG" />
<img src="Pic05.JPG" />
</div>
<script type="text/javascript">
$(function() { $("#myDiv").cycle("shuffle"); });
</script>
</body>
</html>
-----------------------------------------------
複雜的邏輯被包藏在Plugin的黑盒子中，我們只需呼叫Plugin增設的Method，傳入適當的參數，馬上就可以享用其他高手精心研發的成果，讓我們的網頁瞬間獲得加持，這就是Plugin的魔力。
官方網站：http://www.malsup.com/jquery/cycle/
載點：Latest version: 2.88 (08-JUN-2010)
轉貼自：分享2U論壇
沒有留言:
張貼留言