淘宝首页广告轮换效果插件Oslide
20
4月
2010
最近有朋友问我淘宝首页的广告效果是怎么做的，淘宝slide的处理细节很细心，特点就在于最后一张图片切换到第一张的时候，看上去第一张是紧紧地更随在最后一张的后面，而不是类似通常的前滚动整个的slideDiv到达第一张图片，在没有人的干预下整个的滚动的流程就类似与跑马灯一直一个方向，就不会让浏览者会注意到某个区域产生很突兀的变化而引起不适，或者中断他的浏览习惯，这一点上真佩服淘宝UED的交互设计师们。
刚好我在2010淘宝首页改版的时候就偷偷模仿了这个效果。
查看demo 下载 Oslide.0.2.0.js 下载demo-Oslide.0.2.0
今天这位朋友问到，顺便就把这个效果封装成插件。
依照惯例还是讲解一下下options
| 属性名 | 类型 | 默认值 |
描述 |
|
slidetag |
[Selector] |
Null |
滑动元素，默认为子节点 |
|
btntag |
[Selector] |
Null |
滑动按钮元素,不填写则默认增加按钮
<ul class=’lbtn’>…</ul> |
| cur | [Int] | 0 | 杂志左页 |
| direct | [String] | ” down” | 滑动的方向”up”,”down”,”left”,”right” |
| height | [Int] | Null | 滑动元素的滑动高度，默认为滑动元素的高度 |
| width | [Int] | Null | 滑动元素的滑动宽度，默认为滑动元素的宽度 |
| btnClass | [String] | “hover” | 滑动按钮元素选中的class |
| length | [Int] | Null | 滑动的个数,默认为滑动元素的个数 |
| bffunc | [Int] | 0 | 滑动之前的动作 |
| easing | [String] | ” “ | 滑动时增加的缓动动画，需要jQuery easing插件支持 |
| speed | [Int] | 350 | 滑动速度 |
| time | [Int] | 4000 | 自动滑动的间隔时间，如果为null，则不自动滑动 |
（更新10.9.20）
@passager 针对你的建议，Oslide增加了标题的功能
| 属性名 | 类型 | 默认值 | 描述 |
| title | [Object] | Null | 标题功能的定义（title具有多个属性） |
title的下列属性
| 属性名 | 类型 | 默认值 | 描述 |
| fx | [Boole] | false | 标题动画的开启 true 使用动画
false 不使用动画 |
| dock | [String] | bottom | 标题区域定位的位置 只有 top 和 bottom
2个参数可选（top为顶部，bottom为底部） |
| height | [Object] | Null | 标题区域的高度 |
| bgcolor | [Object] | Null | 标题区域的背景颜色 |
| opacity | [Object] | 0 | 标题区域背景的透明度 |
| length | [Object] | Null | 标题的最长字数 |
| overflow | [Object] | ‘ellipsis’ | 标题超出字数后添加的字符，‘ellipsis’为‘…’ |
| templates | [Object] | Null | 标题模板（） |
期待博主能将此插件增加标题区域，使之方便用于新闻展示~
非常感谢你的建议，已经增加了标题的展示
感谢更新。
想把这个插件应用到一个项目中去，发现CSS不知道怎么处理。
如何写CSS是一个头疼的问题。能不能把CSS也封装了呢？
或者整理成一个可定制的规范。
当direct为down的时候，4到1的切换貌似出现了队列的错误！！
这个样子，好的，我试试重新修复
不错的jquery插件
能否加入二次修改属性？比如滚动的高度和宽度的修改
二次修改属性，我有点不太明白，如果你有需要我可以修改
Pingback引用通告： 淘宝首页 轮换广告中的一个小问题 - web标准 - 开发者第1130097个问答