2013年5月22日 星期三

正流行的互動文本表現：Content slider


十三行博物館

  • 相 傳在清朝 時，這裡曾經是重要的貿易商港，有多達十三家行郊在此經商，所以大家就將這裡稱做「十三行」。



Persistence
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>
要生成 Content Slider 的語法

<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>

說明：
1。<div xxx>裡，首先要來決定 content slider 內的「文本區塊」的寬度(width)和高度(height)。
2。<li>xxx</li>是一次 slider 的內容。此例共有四個 slider 內容。
3。Slider 的文本內容，此例均為圖片，所以是圖片的語法<img src="xxx">。同時也設定了圖片的寬度和高度。
4。Slider 的文本內容，可以是任何 html 的內容，例如用表格來表現圖文整合的內容。但注意表格的寬度和高度要和 Div 所設定的寬、高一樣。



影音教學：





教學範例作品：


  •                 從 白天到晚上的藍！









此教學範例所使用的套裝程式軟體：bxSlider 。

沒有留言:

張貼留言