Cycle Plugin 官方下載點
想讓商品或照片以幻燈片的方式自動輪播嗎~?
JQuery的Cycle插件能輕鬆幫您做到唷!
Bonny設計之路-Cycle Plugin教學(一)
基本型:將多張圖片相疊，以幻燈片的方式自動輪播切換
1.請先下載插件檔 官方下載點，將檔案儲存至網站目錄下
2.打開網頁檔，將下方圖片語法貼至<body>與</body>標籤之間。請填入各個圖片所在的位置，並設定統一的寬度和高度。
<div class="slideshow">
<img src="圖片1位置" width="寬度" height="高度" />
<img src="圖片2位置" width="寬度" height="高度"/>
<img src="圖片3位置" width="寬度" height="高度"/>
<img src="圖片4位置" width="寬度" height="高度"/>
<img src="圖片5位置" width="寬度" height="高度"/>
</div>
3.將下方語法貼至<head>與</head>標籤之間
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle();
});
</script>
4.基本的幻燈片輪播效果就完成囉!
留言列表
