SliderLite - Extjs-core实现的淘宝首页渐隐版Slider

• eslint-plugin-extjs:使用ExtJS框架的项目的ESLint规则
• Spket - ExtJS提示工具，附规范文件
• Alien-Web-ExtJS-V3:Alien-Web-ExtJS-V3 的只读发布历史
• JavaScript-ExtJS-V3:JavaScript-ExtJS-V3 的只读发布历史
• dream-first-extjs-parent：初梦-extjs项目的父。maven中继承此项目可以实现替代开发

归属

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@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>