插件需求1,向左或者右移动列表中的元素。(注,上下方向也一样的,用钢性铸铁控制列表元素漂浮物的方向即可~) 2,鼠标移动到某个元素上时,改元素突出显示(css控制),播放器停止滚动。移开后继续跑马。 3,可选左右手工导航按钮
实现原理移动列表末尾元素到第一个元素前面即可。将来的扩展(以后用到的话再看吧)多个元素同时移动;移动时的效果;移动后的回调函数;(注:利用移动后的回调函数可以方便做一个相册插件,有兴趣的自己写下)。做开发的人要记住一句话:做可能有用的最简单的事情!做最简单可用的东东,千万别过分设计xMarquee应用编程接口说明1、dom规约看下面源码处~2,css示例看下面源码处~ 3,主方法调用复制代码代码如下:脚本类型='text/javascript' //![CDATA[ $('#wk_featured_items ').xMarquee({ });//]]/脚本插件源码复制代码代码如下: ;(函数($) { //私有函数var p={ };p.stop=函数(evt){ if(evt){ $(this)} .addCLaSS(p . opts。on);};窗户。clearinterval};p . slide=function(){ if(p . opts。dir==1){ p . I . filter(' : last ').隐藏()。法丁(p . opts _ FADEIN).前置到(p . t);} else { if(p . opts。vnum p . CNT){ p . I .过滤器(' : first ').淡出.appendo(p . t);p . I .滤波器(' : eq(' p . opts。vnum’)).FADEIN(p . opts _ FADEIN);} else { p . I . filter(' : first ').隐藏()。附录(太平洋时间).FADEIN(p . opts _ FADEIN);};};//刷新p . I=$(p . opts。I,p . t);//可见性p . I .过滤器(' : gt)((p . opts。vnum-1)')').hide();};//幻灯片p.go=函数(evt){ p . stop();if(evt){ $(this)} .移除CLaSS(p . opts。on);};p . _ intervalID=window。setinterval(function(){ p . slide();},p . _ opts。间隔);};//go/主插件正文$.fn.xMarquee=函数(选项){ //设置选项。选项=$。extend({},$.fn.xMarquee.defaults,options);p._opts=选项;//遍历匹配的元素,返回框架对象。返回这个。每个(函数(){//注意:如果想要支持多个选取框实例,我们应该通过$(这个)缓存私有变量。数据(' v ',v)p . t=这个;//字幕目标;//silde items p . I=$(p . opts。I,p . t);p . _ CNT=p . I . size();p. _ intervalID=null//隐藏不需要的项目p . I .过滤器(' : gt)((p . opts。vnum-1)')').hide();悬停(停止,前进);//按钮注册$(p . opts _ BTN 0).点击(功能(evt){ p . opts。dir=0;p . stop();p . slide();返回false})。鼠标移出(p . go);$(p._opts.btn1).点击(功能(evt){ p . opts。dir=1;p . stop();p . slide();返回false})。鼠标移出(p . go);//触发滑动盒p . go();});};//公共默认值。$ .fn。圣诞快乐。默认值={ : ' cur ',i: 'li ',//幻灯片项目钢性铸铁选择器interval: 5000,fadein: 300,fadeout: 200,vnum: 4,//可见字幕项目dir: 1,//字幕方向。=右0=左侧;BTN 0: '' prev ',//prev按钮btn1: ' .下一步'//下一步按钮};})(jQuery);打包下载地址