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

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