Xslider演示8种滚动效果

来源:https://www.sucaihuo.com/js/365.html 2015-08-21 08:27浏览(1247) 收藏

写滚动效果的html结构可能大都是用li列表,滚动时一般是通过li的个数来指定移动距离,Xslider打破这种思维局限,任何一个对象在这里都能实现滚动效果,而不仅是li列表!为什么?插件的思想是把移动对象网格化看待,通过判断可视框宽度、要移动对象的宽度及它当前的位置(获取left或top值)来控制滚动,所以你只需指定可视框宽度、要移动对象的宽度以及每次要移动的单位网格数,不管你的html结构是li的列表还是纯文本字段,都能实现滚动的效果
Xslider演示8种滚动效果
分类:图片代码 > 图片滚动 难易:中级
查看演示 下载资源 下载积分: 20 积分

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

<div class="productshow">
    <div class="scrollcontainer">
        <ul>
            <li>
                <div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
                <p><a href="">1.家电彩涂钢板</a></p>
            </li>
            <li>
                <div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
                <p><a href="">2.幻彩变色彩涂钢板</a></p>
            </li>
            <li>
                <div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
                <p><a href="">3.环保彩涂钢板</a></p>
            </li>
            <li>
                <div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
                <p><a href="">4.家电彩涂钢板</a></p>
            </li>
        </ul>
    </div>
    <a class="abtn aleft" href="#left">左移</a>
    <a class="abtn aright" href="#right">右移</a>
</div>
$(".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不自动移动;
});

演示三:分页

$(function() {
    //左右切换分页效果的实现;
    var totalnum = $(".productshow li").length,
    numperpage = 10,
    pages = Math.ceil(totalnum / numperpage),
    temp = $(".scrollwraper ul");

    function app() {
        temp = $("<ul />").append(temp.find("li:gt(" + (numperpage - 1) + ")")).appendTo($(".scrollwraper"));
        if (temp.find("li").length > numperpage) {
            app();
        }
    }
    app();

    $(".productshow").Xslider({
        scrollobj: ".scrollwraper",
        unitdisplayed: 1,
        numtoMove: 1,
        viewedSize: 650,
        unitlen: 650,
        scrollobjSize: 650 * pages
    });

    $("a").focus(function() {
        this.blur();
    });
})
参数 描述 默认值
unitdisplayed 可视的单位个数 -
movelength 要移动的单位个数 -
maxlength 可视宽度或高度 要移动对象外层的宽或高度
scrollobj 要移动的对象 productshow下的u
unitlen 移动的单位宽或高度 li的尺寸
nowlength 移动最长宽或高 由li个数乘以unitlen所得的积
dir 水平移动还是垂直移动 H
autoscroll 自动移动间隔时间 毫秒 不自动移动
scrollobjSize 移动最长宽或高(就是要移动对象“.scrollobj”最大能设置的left或top值) 不传入则由“.productshow”下li个数乘以unitlen计算。demo页面的范例一效果就是通过指定该值来实现;
loop cycle,该参数是可选项。指定是否需要循环滚动,不需要则不要传入该参数 注意如果html结构不是li列表的话不能实现循环滚动的效果; -
numtoMove 指定每次移动最小单元的个数 -
标签: 滚动
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2