Xslider演示8种滚动效果

2016-11-15 11:55:04来源:cnblogs.com作者:285267128人点击

第七城市

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

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

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

三、自动切换

四、循环切换

五、文本的上下滚动

六、上下切换

七、上下自动循环切换



 

在线预览

 

下载地址

 

在线实例

<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>

  

 

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台