JQuery 插件制作实践 xMarquee插件V1.0
更新时间：2010年04月02日 00:07:15 作者：
今天要介绍的是实现类跑马灯效果的的广告插件。类似偶公司web-dev的同事在网站首页上做的目录广告播放器。其实很简单，LEVIN实际应用中也用到,所以稍作整理如下.
插件需求
1，向左或者右移动列表中的元素.(注，上下方向也一样的，用css控制列表元素float的方向即可～)
2，鼠标移动到某个元素上时，改元素突出显示(css控制)，播放器停止滚动。移开后继续跑马。。
3，可选左右手工导航按钮。
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动；移动时的效果；移动后的回调函数；（注：利用移动后的回调函数可以方便做一个相册插件，有兴趣的自己写下）。做开发的人要记住一句话：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>
插件源码
; (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);
打包下载地址
1，向左或者右移动列表中的元素.(注，上下方向也一样的，用css控制列表元素float的方向即可～)
2，鼠标移动到某个元素上时，改元素突出显示(css控制)，播放器停止滚动。移开后继续跑马。。
3，可选左右手工导航按钮。
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动；移动时的效果；移动后的回调函数；（注：利用移动后的回调函数可以方便做一个相册插件，有兴趣的自己写下）。做开发的人要记住一句话：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>
插件源码
复制代码 代码如下:
; (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);
打包下载地址
相关文章
jQuery增加、删除及修改select option的方法
这篇文章主要介绍了jQuery增加、删除及修改select option的方法,涉及jQuery针对form表单中select选项的常见操作技巧,需要的朋友可以参考下2016-08-08
今天小编就为大家分享一篇关于Jquery实现无缝向上循环滚动列表的特效，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-02-02
这篇文章主要介绍了jQuery模拟黑客帝国矩阵效果的方法,实例分析了jQuery操作页面元素实现动画效果的技巧,需要的朋友可以参考下2015-06-06
jQuery结合jQuery.cookie.js插件实现换肤功能示例
这篇文章主要介绍了jQuery结合jQuery.cookie.js插件实现换肤功能,结合实例形式分析了jQuery.cookie.js插件的常用函数功能及实现换肤功能的相关操作技巧,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了基于jquery实现左右无缝轮播图的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
本篇文章主要是对jQuery实现动画效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
网上这种插件很多，但是没一个合适的，大部分都做得很大，功能齐全。于是自己做了这个小插件，顺便学习下jQuery插件的写法。2010-08-08
这篇文章主要介绍了jQuery深拷贝Json对象的简单实现方法,以简单示例形式分析了jQuery深拷贝的操作技巧,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jquery实现可拖动DIV自定义保存到数据，有需要的朋友可以参考一下2013-11-11
这篇文章主要为大家详细介绍了jquery Banner轮播选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论