十三行博物館
-
-
-
-
相 傳在清朝 時，這裡曾經是重要的貿易商港，有多達十三家行郊在此經商，所以大家就將這裡稱做「十三行」。
Persistence
Content Slider 和我們平常一直說的 Image Gallery 有什麼不同呢？
Content Slider 和我們平常一直說的 Image Gallery 有什麼不同呢？
Copy下列檔案。
以下請貼入<head>xxx</head>之間或貼入<body>之後：
<!-- jQuery library (served from Google) -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/plugins/jquery.fitvids.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script>
<!-- bxSlider CSS file -->
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">
再來，下列請貼入<body>之後：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
video: true,
useCSS: false
});
});
</script>
<!-- jQuery library (served from Google) -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/plugins/jquery.fitvids.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script>
<!-- bxSlider CSS file -->
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">
再來，下列請貼入<body>之後：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
video: true,
useCSS: false
});
});
</script>
要生成 Content Slider 的語法
說明：
1。<div xxx>裡，首先要來決定 content slider 內的「文本區塊」的寬度(width)和高度(height)。
2。<li>xxx</li>是一次 slider 的內容。此例共有四個 slider 內容。
3。Slider 的文本內容，此例均為圖片，所以是圖片的語法<img src="xxx">。同時也設定了圖片的寬度和高度。
4。Slider 的文本內容，可以是任何 html 的內容，例如用表格來表現圖文整合的內容。但注意表格的寬度和高度要和 Div 所設定的寬、高一樣。
<div
style="width: 640px; height: 480px;">
<ul class="bxslider">
<li><img src="/images/pic1.jpg" width="640" height="480"></li>
<li><img src="/images/pic2.jpg" width="640" height="480"></li>
<li><img src="/images/pic3.jpg" width="640" height="480"></li>
<li><img src="/images/pic4.jpg" width="640" height="480"></li>
</ul>
</div>
<ul class="bxslider">
<li><img src="/images/pic1.jpg" width="640" height="480"></li>
<li><img src="/images/pic2.jpg" width="640" height="480"></li>
<li><img src="/images/pic3.jpg" width="640" height="480"></li>
<li><img src="/images/pic4.jpg" width="640" height="480"></li>
</ul>
</div>
說明：
1。<div xxx>裡，首先要來決定 content slider 內的「文本區塊」的寬度(width)和高度(height)。
2。<li>xxx</li>是一次 slider 的內容。此例共有四個 slider 內容。
3。Slider 的文本內容，此例均為圖片，所以是圖片的語法<img src="xxx">。同時也設定了圖片的寬度和高度。
4。Slider 的文本內容，可以是任何 html 的內容，例如用表格來表現圖文整合的內容。但注意表格的寬度和高度要和 Div 所設定的寬、高一樣。
影音教學：
|
教學範例作品：
|
-
從 白天到晚上的藍！
此教學範例所使用的套裝程式軟體：bxSlider 。
沒有留言:
張貼留言