TB.widget.SimpleSlide基于Javascript和CSS的图片轮播(SlideShow)

介绍

TB.widget.SimpleSlide 是淘宝网站频道页使用的轮播卡盘脚本实现,用于展示促销大图或广告。支持自动切换,及滚动切换、淡入淡出两种切换效果。

Usage:

TB.widget.SimpleSlide基于 Unobtrusive Javascript 的思想构建,分离了结构、表现及行为。典型使用形式如下:

介绍

TB.widget.SimpleSlide 是淘宝网站频道页使用的轮播卡盘脚本实现,用于展示促销大图或广告。支持自动切换,及滚动切换、淡入淡出两种切换效果。

Usage:

TB.widget.SimpleSlide基于 Unobtrusive Javascript 的思想构建,分离了结构、表现及行为。典型使用形式如下:

xHTML:

<div id="slide-demo">
  <ul>
    <li>
      内容块 或 <iframe>
    </li>
    <li>
      内容块 或 <iframe>
    </li>
    ……
  </ul>
</div>

CSS:

<style type="text/css">
#slide-demo {
        margin: 0;
        padding: 0;
        list-style: none;
        /* 必须指定宽度和高度 */
        width: 360px;
        height: 190px;
        /* 要求相对定位和隐藏溢出 */
        position: relative;
        overflow: hidden;
}
</style>

JavaScript:

<script type="text/javascript">
TB.widget.SimpleSlide.decorate(‘slide-demo’ [,config]);
</script>

TB.widget.SimpleSlide 会自动产生一个控制条 ,并插入到轮播卡盘之后。控制条根据内容块的数量产生对应数目的,每个的innerHTML即它的索值+1。

参考资料:

Leave a Reply

Your email address will not be published. Required fields are marked *