Xslider演示8种滚动效果
Posted 最骚的就是你
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Xslider演示8种滚动效果相关的知识，希望对你有一定的参考价值。
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/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> |
以上是关于Xslider演示8种滚动效果的主要内容，如果未能解决你的问题，请参考以下文章