 |
热门文章 |
|
|
|
|
| 淘宝首页广告轮换效果插件Oslide |
| 来源：经典论坛 更新时间：2010/8/13 16:14:21 阅读次数： 我要投稿 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oslide Demo</title>
<link rel="stylesheet" href="index.css" type="text/css" charset="utf-8" title="main" />
<script src="jquery.min.js " language="javascript" type="text/javascript"></script>
<script src="Oslide.js" language="javascript" type="text/javascript"></script>
<script src="easing.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
var $o = $(".j_Slide");
var ks = $o.find("ol").Oslide({
slidetag:$o.find("ol>li"),
easing:"easeInOutCirc",
speed:450
});
var $p = $(".j_Slide1");
var ks = $p.find("ol").Oslide({
slidetag:$p.find("ol>li"),
btntag:$p.find(".handel"),
direct:'right',
easing:"easeInOutCirc"
});
});
</script>
</head>
<body>
<div class="j j_Slide loading">
<ol class="tb-slide-list">
<li class="J_ECPM"><a href="http://btorange.com" target="_blank"><img src="ad_5.jpg" /></a></li>
<li class="J_ECPM"><a href="http://btorange.com" target="_blank"><img src="ad_6.jpg" /></a></li>
<li class="J_ECPM"><a href="http://btorange.com" target="_blank"><img src="ad_7.jpg" /></a></li>
<li class="J_ECPM"><a href="http://btorange.com" target="_blank"><img src="ad_8.jpg" /></a></li>
</ol>
</div>
<div class="j j_Slide1">
<div class="hd">
<h3>最新商家</h3>
<ul class="handel clearfix">
<li><a href="javascript:void(0)">●</a></li>
<li><a href="javascript:void(0)">●</a></li>
<li><a href="javascript:void(0)">●</a></li>
</ul>
</div>
<div class="bd">
<ol class="tb-slide-list clearfix">
<li class="J_ECPM"><a href="http://btorange.com" target="_blank"><img src="ad_3.jpg" /></a><a href="http://btorange.com" target="_blank"><img src="ad_1.jpg" /></a></li>
<li class="J_ECPM"><a href="http://btorange.com" target="_blank"><img src="ad_2.jpg" /></a><a href="http://btorange.com" target="_blank"><img src="ad_4.jpg" /></a></li>
<li class="J_ECPM"><a href="http://btorange.com" target="_blank"><img src="ad_2.jpg" /></a><a href="http://btorange.com" target="_blank"><img src="ad_4.jpg" /></a></li>
</ol>
</div>
</div>
</body>
</html> |
| 特效说明： |
淘宝2010首页的广告轮换效果，不同于其他效果，特点在于最后一张图片切换到第一张图片的时候，看上去第一张图片是紧紧地更随在最后一张的后面，而不是向前回滚整个的列表。
属性名 类型 默认值 描述
slidetag[Selector] Null 滑动元素，默认为子节点
btntag[Selector] Null滑动按钮元素,不填写则默认增加按钮<ul class='lbtn'>…</ul>
cur [Int] 0 杂志左页
direct [Selector] " 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，则不自动滑动 |
|
| 上一篇文章： 符合标准的随滚动条滚动的广告代码下一篇文章： 像163网站顶部展出的大幅广告 |
|
|
|
注册 登录
