插件需求
1，向左或者右移動(dòng)列表中的元素.(注，上下方向也一樣的，用css控制列表元素float的方向即可～)
2，鼠標(biāo)移動(dòng)到某個(gè)元素上時(shí)，改元素突出顯示(css控制)，播放器停止?jié)L動(dòng)。移開(kāi)后繼續(xù)跑馬。。
3，可選左右手工導(dǎo)航按鈕。
實(shí)現(xiàn)原理
移動(dòng)列表末尾元素到第一個(gè)元素前面即可。
將來(lái)的擴(kuò)展(以后用到的話再看吧)
多個(gè)元素同時(shí)移動(dòng)；移動(dòng)時(shí)的效果；移動(dòng)后的回調(diào)函數(shù)；（注：利用移動(dòng)后的回調(diào)函數(shù)可以方便做一個(gè)相冊(cè)插件，有興趣的自己寫(xiě)下）。做開(kāi)發(fā)的人要記住一句話：Do the simplest thing that could possibly work！做最簡(jiǎn)單可用的東東，千萬(wàn)別過(guò)分設(shè)計(jì)。
xMarquee API說(shuō)明
1，dom規(guī)約
看下面源碼處～2，css示例
看下面源碼處～
3，主方法調(diào)用
<script type="text/javascript">
//<![CDATA[
$("#wk_featured_items").xMarquee({});
//]]>
</script>
插件源碼
; (function($) {
// Private functions.
var p = {};
p.stop = function(evt) { if (evt) { $(this).addClass(p._opts.on); }; window.clearInterval(p._intervalID); };
p.slide = function() {
if (p._opts.dir == 1) {
p._i.filter(":last").hide().fadeIn(p._opts.fadein).prependTo(p._t);
} else {
if (p._opts.vnum < p._cnt) {
p._i.filter(":first").fadeOut(p._opts.fadeout).appendTo(p._t);
p._i.filter(":eq(" + p._opts.vnum + ")").fadeIn(p._opts.fadein);
} else {
p._i.filter(":first").hide().appendTo(p._t).fadeIn(p._opts.fadein);
};
};
//refresh
p._i = $(p._opts.i, p._t);
//visibility
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide();
}; //slide
p.go = function(evt) {
p.stop();
if (evt) {
$(this).removeClass(p._opts.on);
};
p._intervalID = window.setInterval(function() { p.slide(); }, p._opts.interval);
}; //go
//main plugin body
$.fn.xMarquee = function(options) {
// Set the options.
options = $.extend({}, $.fn.xMarquee.defaults, options);
p._opts = options;
// Go through the matched elements and return the jQuery object.
return this.each(function() {
//NOTE:if wanna support multiple marquee instance,we should cache private variable via $(this).data("v",v)
p._t = this; //marquee target;
//silde items
p._i = $(p._opts.i, p._t);
p._cnt = p._i.size();
p._intervalID = null;
//hide unwanted items
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide();
p._i.hover(p.stop, p.go);
//buttons registeration
$(p._opts.btn0).click(function(evt) { p._opts.dir = 0; p.stop(); p.slide(); return false; }).mouseout(p.go);
$(p._opts.btn1).click(function(evt) { p._opts.dir = 1; p.stop(); p.slide(); return false; }).mouseout(p.go);
//trigger the slidebox
p.go();
});
};
// Public defaults.
$.fn.xMarquee.defaults = {
on: 'cur',
i: 'li', //slide items css selector
interval: 5000,
fadein: 300,
fadeout: 200,
vnum: 4, //visible marquee items
dir: 1, //marquee direaction.1=right;0=left;
btn0: '.prev', //prev button
btn1: '.next'//next button
};
})(jQuery);
打包下載地址
