图片滚动插件slider.js

      

     图片滚动的特效在我们平时开发项目中经常会碰到，新手一接到这样的任务经常会不知所措，工作半年来已经不下做了3-4个图片滚动切换特效，有左右滚动的，上下滚动的，同时2、3、4张图片滚动的，什么都用。刚接触这样的任务时，开始都会有恐惧心理，不用怕，xslider.js将会告诉我们这一切都不是问题。

 

•       碰到这样的问题：

     1.  不要畏惧，不要把他想得太难了，要有信心干掉它。

     2.  不要急着去改样式，首先实现基本滚动功能再去慢慢改一些样式。

  

•      图片滚动实现：

    一般情况下滚动的布局要求是：

            <div class =" container">

                <div class="imagelist">

                    <ul>

                           <li>image1</li>

                           <li>image2</li>

                           <li>image3</li>

                  </ul>

              </div>

           </div>

    1.   container的样式要求： position:relative或者是position：absolute，高度和宽度是没有要求的

    2.   imagelist 的高度和宽度一定要定死。

    3.   ul的宽度设置成width：20000px（足够大），position：absolute      用火狐去查看每个标签时，图片

          左右滚动时你会发现只有ul标签的left属性在发生变化。 由此可知图片左右滚动的原理是改变滚动对象

          的left属性实现的。

  4.   设置  a.aleft （左移动按钮样式）  a.agrayleft （左滑到最后一张图片的样式）

         a.aright （左移动按钮样式）a.agrayright  （左滑到最后一张图片的样式）    

       

•    xslider.js的使用方法

     xslider.js不仅可以支持水平滚动N张图片，而且还支持垂直滚动N张图片，更牛X的是还支持图片自动滚动

    $(".productshow").xslider({//.productshow是要移动对象的外框; 
         unitdisplayed:3,//可视的单位个数 必需项; 
         movelength:1,//要移动的单位个数 必需项; 
         maxlength:null,//可视宽度或高度 默认查找要移动对象外层的宽或高度; 
        scrollobj:null,//要移动的对象 默认查找productshow下的ul; 可以使div也可以使li 
        unitlen:null,//移动的单位宽或高度 默认查找li的尺寸; 
        nowlength:null,//移动最长宽或高（要移动对象的宽度或高度） 默认由li个数乘以unitlen所得的积; 
        dir:"H",//水平移动还是垂直移动，默认H为水平移动，传入V或其他字符则表示垂直移动; 
        autoscroll:1000//自动移动间隔时间 默认null不自动移动; 
    });