發佈日期：
分類：
如何使用jQuery及jQuery.flow‧將圖片或交字作幻燈片式(Slide)顯示
還以為世界上只有jQuery，原來有些功能還張加上其他的Plug-in，今天用的jQuery.flow就是其中一個。
01. 例子一：除了要載入jquery-1.6.1.min.js”檔案外，還需要載入jquery.flow.1.1.min.js檔案。首先需要建立Previous及Next按鍵，其class需為jFlowPrev及jFlowNext。之後定義div標籤controller1，可以用其他名稱，只需對應script內名稱便可。而div標籤內的span標籤，其class名稱需為jFlowControl。再定義另一div標籤slides1，可以用其他名稱，只需對應script內名稱便可。而div標籤內，需有另一div標籤，數量需與controller1相同。最後執行script，請留意controller1名稱及slides1名稱，須與上面相同。並同時定義圖片長寬尺寸。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.jFlowPrev {
left: 0;
}
.jFlowNext {
padding-left: 65px;
}
#controller1 {
display: none;
}
#slides1 {
padding-left:0px;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery.flow.1.2.min.js"></script>
</head>
<body>
<span class="jFlowPrev">Previous</span><span class="jFlowNext">Next</span>
<div id="controller1">
<span class="jFlowControl">Slide 1</span>
<span class="jFlowControl">Slide 2</span>
<span class="jFlowControl">Slide 3</span>
</div>
<div id="slides1">
<div><img src="jquery_slide_1.jpg" /></div>
<div><img src="jquery_slide_2.jpg" /></div>
<div><img src="jquery_slide_3.jpg" /></div>
</div>
<script>
$(function() {
$("div#controller1").jFlow({
slides: "#slides1",
width: "160px",
height: "120px"
});
});
</script>
</body>
</html>
02. 例子二：與之前例子一樣，但將圖片改為文字。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.jFlowPrev {
left: 0;
}
.jFlowNext {
padding-left: 65px;
}
#controller1 {
display: none;
}
#slides1 {
padding-left:0px;
}
.red_text {
color: red;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery.flow.1.2.min.js"></script>
</head>
<body>
<span class="jFlowPrev">Previous</span><span class="jFlowNext">Next</span>
<div id="controller1">
<span class="jFlowControl">Slide 1</span>
<span class="jFlowControl">Slide 2</span>
<span class="jFlowControl">Slide 3</span>
</div>
<div id="slides1">
<div class="red_text">Slide A: This is slide A. The first of page.</div>
<div class="red_text">Slide B: This is slide B. The second of page.</div>
<div class="red_text">Slide C: This is slide C. The third of page.</div>
</div>
<script>
$(function() {
$("div#controller1").jFlow({
slides: "#slides1",
width: "160px",
height: "120px"
});
});
</script>
</body>
</html>
註：jQuery版本為1.6.1，jQuery.flow版本為1.2。
發佈留言