图片滚动的特效在我们平时开发项目中经常会碰到,新手一接到这样的任务经常会不知所措,工作半年来已经不下做了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不自动移动;
});