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

归属

 

 

[置顶] 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>

评论

4 楼 嗰個人 2009-10-26  

國内很少Ext方面的應用，Ext-core就更少了。謝謝分享

3 楼 jianfeng008cn 2009-06-17  

很好很强大

2 楼 yiminghe 2009-06-16  

z95001188 写道

杀鸡用牛刀

你确定这是鸡不是牛？。。。。

1 楼 z95001188 2009-06-16  

杀鸡用牛刀