JQuery最佳實務-xMarquee外掛程式V1.0

今天要介紹的是實作類別跑馬燈效果的的廣告外掛程式。類似偶公司web-dev的同事在網站首頁上做的目錄廣告播放器。其實很簡單，LEVIN實際應用中也用到,所以稍作整理如下.

外掛程式需求

1，向左或者右移動列表中的元素.(注，上下方向也一樣的，用css控制列表元素float的方向即可～)

2，滑鼠移動到某個元素上時，改元素反白(css控制)，播放器停止滾動。移開後繼續跑馬。。

3，可選左右手工導覽按鈕。

目前線上樣本：m18.com首頁

實現原理

移動列表末尾元素到第一個元素前面即可。

將來的擴充(以後用到的話再看吧)

多個元素同時移動；移動時的效果；移動後的回呼函數；（註：利用移動後的回呼函數可以方便做一個相簿外掛程式，有興趣的自己寫下）。做開發的人要記住一句話：Do the simplest thing that could possibly work！做最簡單可用的東東，千萬別過分設計。

xMarquee API說明

1，dom規約

看下面源碼處～

2，css樣本

看下面源碼處～

3，主方法調用

<script type="text/javascript">//<![CDATA[    $("#wk_featured_items").xMarquee({});//]]></script>

外掛程式源碼

1，線上查看

http://code.google.com/p/mamboer/source/browse/branches/Vivasky.Labs/src/JQPlugins/assets/js/jquery.xMarquee.js

http://code.google.com/p/mamboer/source/browse/branches/Vivasky.Labs/src/JQPlugins/assets/css/jquery.xMarquee.css

2，下載CC

http://www.vivasky.com/tools.aspx

源碼中包含完整demo