xSlider 可左右、上下图片切换的无缝滚动效果

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