介绍
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。
参考资料: