Xslider演示8种滚动效果

收藏

写滚动效果的html结构可能大都是用li列表，滚动时一般是通过li的个数来指定移动距离，Xslider打破这种思维局限，任何一个对象在这里都能实现滚动效果，而不仅是li列表！为什么？插件的思想是把移动对象网格化看待，通过判断可视框宽度、要移动对象的宽度及它当前的位置（获取left或top值）来控制滚动，所以你只需指定可视框宽度、要移动对象的宽度以及每次要移动的单位网格数，不管你的html结构是li的列表还是纯文本字段，都能实现滚动的效果

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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

<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();
    });
})