归属
[置顶] Lite-Ext 适合WebPage的轻量级Ext
在 google code 持续更新,这里停止
实现要点:
1.鼠标经过数字变换当前图片,注意设置buffer防止鼠标移动过快,和渐隐效果冲突
2.经过容器就停止图片自动变换
3.移出容器就开始图片自动变换
4.注意禁用javascript时把图片全部显示出来
5.考虑网速过慢时,只有当图片onload时才开始效果
1.0
/* v1.0(20090616) 根据淘宝首页slider的样子,加入渐隐效果,鼠标移动缓冲 v1.5(20090706) 小标标号计算改变,增强容错处理. */
使用代码 :
<script type="text/javascript">
//<![CDATA[
Ext.onReady(function() {
new Ext.ux.SliderLite({
id:'test',
interval:3000 // 轮转间隔 3秒,最少 1秒
});
});
//]]>
</script>
<div class="sliderLite" style="width:360px;" id='test'>
<ul class="sliderImages clearfix">
<li style="width:360px;"><a href="#" title="im1">
<img src="01.gif" alt="test01" title="" /></a></li>
<li style="width:360px;"><a href="#" title="im2">
<img src="02.jpg" alt="test02" title="" /></a></li>
<li style="width:360px;"><a href="#" title="im3">
<img src="03.gif" alt="test03" title="" /></a></li>
<li style="width:360px;"><a href="#" title="im4">
<img src="04.jpg" alt="test04" title="" /></a></li>
</ul>
<ul class="sliderNumbers clearfix">
<li title="num1">1</li>
<li title="num2">2</li>
<li title="num3">三</li>
<li title="num4">四</li>
</ul>
</div>