Xslider演示8种滚动效果包括：

一、左右切换：每次移动固定距离

二、左右切换：最后一个显示在最右侧

三、自动切换

四、循环切换

五、文本的上下滚动

六、上下切换

七、上下自动循环切换



​​在线预览​​


​​下载地址​​


在线实例


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

​​<h2>七、上下自动循环切换</h2>​​​​​​​​<div ​​​​class​​​​=​​​​"newslistwraper"​​​​>​​​​​​​​<div ​​​​class​​​​=​​​​"newslist"​​​​>​​​​​​​​<ul>​​​​​​​​<li>日本通过防卫大纲 明确提出加强钓鱼岛等防卫</li>​​​​​​​​<li>菲律宾称不会对人质事件中香港遇难者作出赔偿</li>​​​​​​​​<li>11月份全国楼市再度量价齐涨 可能引发第三轮调控</li>​​​​​​​​<li>山西巡警队长成黑老大敛财数亿 27套房被查封</li>​​​​​​​​</ul>​​​​​​​​</div>​​​​​​​​<a ​​​​class​​​​=​​​​"abtn aleft"​​​​href=​​​​"#up"​​​​>上移</a>​​​​​​​​<a ​​​​class​​​​=​​​​"abtn aright"​​​​href=​​​​"#down"​​​​>下移</a>​​​​​​​​</div>​​​​​​​​<script type=​​​​"text/javascript"​​​​src=​​​​"/api/jq/5733e37510366/js/jquery-1.4.1.min.js"​​​​></script>​​​​​​​​<script type=​​​​"text/javascript"​​​​src=​​​​"/api/jq/5733e37510366/js/Xslider.js"​​​​></script>​​​​​​​​<script type=​​​​"text/javascript"​​​​>​​​​​​​​$(​​​​function​​​​() {​​​​​​​​//一、左右切换：每次移动固定距离;​​​​​​​​$(​​​​".productshow:eq(0)"​​​​).Xslider({​​​​​​​​unitdisplayed: 3,​​​​​​​​numtoMove: 3,​​​​​​​​scrollobjSize: Math.ceil($(​​​​".productshow:eq(0)"​​​​).find(​​​​"li"​​​​).length / 3) * 486​​​​​​​​});​​​​​​​​//二、左右切换：最后一个显示在最右侧;​​​​​​​​$(​​​​".productshow:eq(1)"​​​​).Xslider({​​​​​​​​unitdisplayed: 3,​​​​​​​​numtoMove: 3​​​​​​​​});​​​​​​​​//三、自动切换;​​​​​​​​$(​​​​".productshow:eq(2)"​​​​).Xslider({​​​​​​​​unitdisplayed: 3,​​​​​​​​numtoMove: 3,​​​​​​​​autoscroll: 2000 ​​​​//自动移动间隔时间 默认null不自动移动;​​​​​​​​});​​​​​​​​//四、循环切换;​​​​​​​​$(​​​​".productshow:eq(3)"​​​​).Xslider({​​​​​​​​unitdisplayed: 3,​​​​​​​​numtoMove: 2,​​​​​​​​loop: ​​​​"cycle"​​​​​​​​});​​​​​​​​//五、文本的上下滚动;​​​​​​​​$(​​​​".vscroll"​​​​).Xslider({​​​​//.productshow是要移动对象的外框;​​​​​​​​unitdisplayed: 6, ​​​​//可视的单位个数 必需项;​​​​​​​​numtoMove: 3, ​​​​//要移动的单位个数 必需项;​​​​​​​​viewedSize: 120, ​​​​//可视宽度或高度 默认查找要移动对象外层的宽或高度;​​​​​​​​scrollobj: ​​​​".vscrollobj"​​​​, ​​​​//要移动的对象 默认查找productshow下的ul;​​​​​​​​unitlen: 20, ​​​​//移动的单位宽或高度 默认查找li的尺寸;​​​​​​​​scrollobjSize: $(​​​​".vscrollobj"​​​​).height(), ​​​​//移动最长宽或高（要移动对象的宽度或高度） 默认由li个数乘以unitlen所得的积;​​​​​​​​dir: ​​​​"V"​​​​//水平移动还是垂直移动，默认H为水平移动，传入V则表示垂直移动;​​​​​​​​});​​​​​​​​//六、上下切换;​​​​​​​​$(​​​​".videolistwraper"​​​​).Xslider({​​​​//.productshow是要移动对象的外框;​​​​​​​​unitdisplayed: 2, ​​​​//可视的单位个数 必需项;​​​​​​​​numtoMove: 1, ​​​​//要移动的单位个数 必需项;​​​​​​​​//loop:"cycle",​​​​​​​​dir: ​​​​"V"​​​​//水平移动还是垂直移动，默认H为水平移动，传入V则表示垂直移动;​​​​​​​​});​​​​​​​​//七、上下自动循环切换;​​​​​​​​$(​​​​".newslistwraper"​​​​).Xslider({​​​​​​​​unitdisplayed: 1,​​​​​​​​numtoMove: 1,​​​​​​​​loop: ​​​​"cycle"​​​​,​​​​​​​​dir: ​​​​"V"​​​​,​​​​​​​​autoscroll: 2500,​​​​​​​​speed: 300​​​​​​​​});​​​​​​​​$(​​​​"a"​​​​).focus(​​​​function​​​​() {​​​​​​​​this​​​​.blur();​​​​​​​​});​​​​​​​​})​​​​​​​​</script>​​