首页 > 代码库 > Xslider演示8种滚动效果

Xslider演示8种滚动效果

2024-08-21 01:38:23   220人阅读

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=http://www.mamicode.com/"#up">上移</a>
            <a class="abtn aright" href=http://www.mamicode.com/"#down">下移</a>
        </div>
        <script type="text/javascript" src=http://www.mamicode.com/"/api/jq/5733e37510366/js/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src=http://www.mamicode.com/"/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种滚动效果


联系
我们