快捷導(dǎo)航

JQuery 插件制作實踐 xMarquee插件V1.0

更新時間：2010年04月02日 00:07:15 作者：

今天要介紹的是實現(xiàn)類跑馬燈效果的的廣告插件。類似偶公司web-dev的同事在網(wǎng)站首頁上做的目錄廣告播放器。其實很簡單，LEVIN實際應(yīng)用中也用到,所以稍作整理如下.

插件需求
1，向左或者右移動列表中的元素.(注，上下方向也一樣的，用css控制列表元素float的方向即可～)
2，鼠標(biāo)移動到某個元素上時，改元素突出顯示(css控制)，播放器停止?jié)L動。移開后繼續(xù)跑馬。。
3，可選左右手工導(dǎo)航按鈕。
jquery_xmarquee_m18

實現(xiàn)原理
移動列表末尾元素到第一個元素前面即可。
將來的擴展(以后用到的話再看吧)
多個元素同時移動；移動時的效果；移動后的回調(diào)函數(shù)；（注：利用移動后的回調(diào)函數(shù)可以方便做一個相冊插件，有興趣的自己寫下）。做開發(fā)的人要記住一句話：Do the simplest thing that could possibly work！做最簡單可用的東東，千萬別過分設(shè)計。
xMarquee API說明
1，dom規(guī)約
看下面源碼處～2，css示例
看下面源碼處～
3，主方法調(diào)用

復(fù)制代碼代碼如下:

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

插件源碼

復(fù)制代碼代碼如下:

 
﻿; (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); 