Yahoo 周年慶的輪播選單畫面

網頁上常常希望放下很多的資訊給使用者看或者是給搜尋引擎加入更多的關鍵字詞，但是一班的列表方式又太佔用空間，所以才會需要用到資訊輪播功能，這樣才能有更多的資訊在你的網頁上。 jQuery – Easy ticker Plugin 類似上圖 Yahoo 周年慶的輪播功能，滾動列表中的項目會無限循環的一直撥放，可以自行訂製它的高度還有一些參數設定。

圖二 jQuery – Easy ticker Plugin 實際執行畫面

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
//jQuery Easy ticker 的主程式碼
<script src="/resources/js/jquery.easy-ticker.min.js" type="text/javascript"></script>

第二步 寫入上圖二中需要用到的 HTML 程式碼
<div class="demo1">
  <ul style="position: absolute; margin: 0px; top: -31.205955555555555px; ">
<li>新聞列表一</li>
    <li>新聞列表二</li>
    <li>新聞列表三</li>
    <li>新聞列表四</li>
  </ul>
</div>

<div class="demo2">
  <div style="position: absolute; margin: 0px; top: 0px; ">
<div><a href="#">標題一</a><p>內容一</p></div>
<div><a href="#">標題二</a><p>內容二</p></div>
<div><a href="#">標題三</a><p>內容三</p></div>
<div><a href="#">標題四</a><p>內容四</p></div>
  </div>
</div>

第三步 為這兩個範例寫上 CSS 樣式表
.demo1{
border: 3px solid #CE00CE;
margin-top: 10px;
font-size: 12px;
background:#663399 url('/resources/images/pages/jquery-easy-ticker/hot-news.png') no-repeat 10px 7px ;
color: white;           /* 熱門新聞的圖片*/
border-radius: 10px;
}
.demo1 ul li{
padding: 5px 10px 5px 80px;
}
.demo2{
border: 2px solid #FF9900;
margin-top: 10px;
font-size: 12px;
border-radius: 10px;
}
.demo2 div div{
padding: 10px 10px 10px 60px;
border-bottom: 1px solid #FF9900;
background: url(/resources/images/pages/jquery-easy-ticker/rss.png) no-repeat 15px center;
border-radius: 10px;     /* RSS 的圖案*/
}

第四步 加上 JavaScript 使其開始動作
$(function(){
  $('.demo3').easyTicker({
visible: 1,
interval: 1500
  });
  $('.demo4').easyTicker({
direction: 'up',
easing: 'easeOutBounce',
interval: 2500
  });
});

附上可修改參數表

$('網頁元素').easyTicker({
 direction: 'up', //方向 可設定為up,down
 easing: 'swing', //動畫方式 
 speed: 'slow',   //轉換過程的速度
        //可設定為slow,medium,fast或數字(毫秒)
 interval: 2000,  //輪播的時間間隔
 height: 'auto',  //元件的高度
 visible: 0,      //一次顯示幾個元素
 mousePause: 1,   //滑鼠移過是否暫停
 controls:{  //指定元素控制上下輪播
  up: '',    //向上元素名稱
  down: '',  //向下元素名稱
  toggle: '' //互相切換過度狀態
 }
});

作者網站：http://www.aakashweb.com/jquery-plugins/easy-ticker/
檔案大小：4.31 KB
檔案下載：http://www.aakashweb.com/resources/downloads/jquery.easy-ticker.zip
檔案備份：下載