css 样式 <style> .xpanel{margin:0px auto;position:relative;} .xpanel .xZoom{position:relative; overflow:hidden;clear:both;clear:both;height:100%;} .xpanel .xZoom .slider{width:10000%;position:absolute; left:0px; top:0px;list-style-type:none;margin:0px;padding:0px;} .xpanel .xZoom .slider li{float:left;margin:0px;padding:0px;} .xpanel .xZoom .slider li a{ display:block; border:0;} .xpanel .xZoom .slider li a img{width:100%; border:0;} .xpanel ol.x-ol{ text-align:center;z-index:999; width:100%;margin:0px;padding:0px;} .xpanel ol.x-ol li{text-align:center; margin:0px 3px; display:inline-block;*display:inline;_zoom:1;} .xpanel ol.x-ol li a{background:#ccc;width:10px;height:10px;display:block;line-height:2px;} .xpanel ol.x-ol li a.cur{ background:#000;} .xpanel ol.x-ol li a:hover{ background:#777;} .xpanel a.btn{display:block; } .xpanel a.pre{left:0px;} .xpanel a.next{right:0px;} .xpanel2{margin:0px auto; position:relative;} .xpanel2 .xZoom{position:relative; overflow:hidden;clear:both;height:100%;} .xpanel2 .xZoom .slider{position:absolute; left:0px; top:0px;list-style-type:none;margin:0px;padding:0px} .xpanel2 .xZoom .slider li{margin:0px;padding:0px;width:100%;} .xpanel2 .xZoom .slider li a{ display:block; border:0;margin:0px;padding:0px;} .xpanel2 .xZoom .slider li a img{height:100%;border:0;margin:0px;padding:0px;} .xpanel2 ol.x-ol{ text-align:center;z-index:999; width:100%;margin:0px;padding:0px;} .xpanel2 ol.x-ol li{text-align:center; margin:0px 3px; display:inline-block;*display:inline;_zoom:1;} .xpanel2 ol.x-ol li a{background:#ccc;width:10px;height:10px;display:block;line-height:2px;} .xpanel2 ol.x-ol li a.cur{ background:#000;} .xpanel2 ol.x-ol li a:hover{ background:#777;} .xpanel2 a.btn{display:block; } .xpanel2 a.pre{left:0px;} .xpanel2 a.next{right:0px;} </style> javascript <script> var s,s2 ; $(function(){ s = $(".xpanel").xSlider(); s2 = $(".xpanel2").xSlider({direction:'vertical',auto:false,backFun:'back_fun',}); }) function back_fun(d){ alert(d); } function pre(){ s.Prev(); s2.Next(); }; </script> 参数 var del = { auto:true, speed:3000, direction:"horizontal",// 默认为水平(horizontal/vertical) animationDuration:500, slideDirection:"next", //滚动的方向 slideToStart:0, controlNav:true, controlBtn:true, prevText: "Previous", nextText: "Next", Prev:function(){ _pre(); }, Next:function(){ _next(); }, backFun:"" }
插件大小已压缩至4kb以内,支持外调用插件方法和插件回调
使用版本为jquery-1.4.4.min.js,支持ie6+,谷歌,火狐
没有做太多的样式美化但样式容易修改。
原文地址:http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140812095156