網站投影片展示 – jCarousel 效果介紹

近年來，網頁設計時，由於考慮到手持裝置越來越被廣泛的使用，就算沒有做成手持裝置的網頁，也會盡量避免FLASH的使用，今天來介紹一套jquery的plugin jCarousel，輪播的效果非常不錯。

• plugin名稱：jCarousel
• 官網位置：https://sorgalla.com/jcarousel/
• 版本：0.3.9 (2018/7/30)

使用方法：

步驟一：引入需要的javascript 及 css

<link href="/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />

步驟二：Html架構如下

<ul id="mycarousel" class="jcarousel-skin-tango">
  <li><img src="/images/01.png" widtd="64" height="64" alt="" /></li>
  <li><img src="/images/02.png" widtd="64" height="64" alt="" /></li>
  <li><img src="/images/03.png" widtd="64" height="64" alt="" /></li>
  <li><img src="/images/04.png" widtd="64" height="64" alt="" /></li>
  <li><img src="/images/05.png" widtd="64" height="64" alt="" /></li>
  <li><img src="/images/06.png" widtd="64" height="64" alt="" /></li>
  <li><img src="/images/07.png" widtd="64" height="64" alt="" /></li>
  <li><img src="/images/08.png" widtd="64" height="64" alt="" /></li>
</ul>

步驟三：加上以下的javascript

jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel();
});

就這樣完成了!!簡單吧

還有更多細節的參數可以調整，例如自動撥放，ajax 的 loading，一次移動幾個元素…等，這邊就請大家自行到官網上的 examples 去觀看囉。

作者還有另外兩個專案，是做 lightbox 跟 Grid 系統的，下次再來介紹。