您的位置:主页 > HTML/JS > 淘宝首页广告轮换效果插件Oslide

淘宝首页广告轮换效果插件Oslide

最近有朋友问我淘宝首页的广告效果是怎么做的,淘宝slide的处理细节很细心,特点就在于最后一张图片切换到第一张的时候,看上去第一张是紧紧地更随在最后一张的后面,而不是类似通常的前滚动整个的slideDiv到达第一张图片,在没有人的干预下整个的滚动的流程就类似与跑马灯一直一个方向,就不会让浏览者会注意到某个区域产生很突兀的变化而引起不适,或者中断他的浏览习惯,这一点上真佩服淘宝UED的交互设计师们。

刚好我在2010淘宝首页改版的时候就偷偷模仿了这个效果。

查看demo 下载  Oslide.0.2.0.js 下载demo-Oslide.0.2.0

Oslide

今天这位朋友问到,顺便就把这个效果封装成插件。

依照惯例还是讲解一下下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增加了标题的功能

下载  Oslide.0.2.0.js

下载  Oslide.0.2.0-min.js

属性名 类型 默认值 描述
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 标题模板()

作者:ariesjia

前端少先队员,光荣的红领巾在胸前飘扬

继续八卦

已经10条留言

  1. passager On 2010年09月4日1:28 上午

    期待博主能将此插件增加标题区域,使之方便用于新闻展示~

    • ariesjia On 2011年05月6日8:33 下午

      非常感谢你的建议,已经增加了标题的展示

      • passager On 2011年05月14日10:10 上午

        感谢更新。

  2. 林剑锋 On 2011年01月12日2:52 下午

    想把这个插件应用到一个项目中去,发现CSS不知道怎么处理。
    如何写CSS是一个头疼的问题。能不能把CSS也封装了呢?
    或者整理成一个可定制的规范。

  3. td On 2011年06月9日9:26 下午

    当direct为down的时候,4到1的切换貌似出现了队列的错误!!

    • ariesjia On 2011年08月6日6:08 下午

      这个样子,好的,我试试重新修复

  4. 阳光 On 2014年02月8日12:22 下午

    能否加入二次修改属性?比如滚动的高度和宽度的修改

    • ariesjia On 2014年02月8日4:26 下午

      二次修改属性,我有点不太明白,如果你有需要我可以修改

  5. Pingback引用通告: 淘宝首页 轮换广告中的一个小问题 - web标准 - 开发者第1130097个问答

ariesjia的回复 取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据