渴切发布 Ta.js 触摸幻灯片解决方案 - 开源中国社区
Float_left Icon_close
渴切发布 Ta.js 触摸幻灯片解决方案
tyshymy 2013年12月20日

渴切发布 Ta.js 触摸幻灯片解决方案

tyshymy tyshymy 发布于2013年12月20日 收藏 75 评论 21

阿里云高性能云服务器,2折起! >>> >>>  

ta.js"钽" 触摸式幻灯片解决方案ta取自touch(触摸)的首字母。
不傻瓜,但是很简洁灵活,最适合手机移动设备

用到了 jquery.mobile 的两个触摸事件 swipeleft 和 swiperight

一个幻灯片的基本 html 结构(简洁到不能在缩减的,最简写法)

<div class="ta">
    	<div class="prev">
        </div>
		<div class="inner">
        	<ul>
            	<li><a href="#"><img src="img.jpg" /></a></li>
            	<li><a href="#"><img src="img.jpg" /></a></li>
            	<li><a href="#"><img src="img.jpg" /></a></li>
            </ul>
      </div>
        <div class="next"></div>
  </div>

css样式代码

.ta{
	border:#ccc solid 1px; padding:20px 30px; width:480px; height:auto; overflow:hidden; 
margin:50px auto 50px auto; background:#fff;
}
.ta .prev , .ta .next{
	width:50px; background:url(prev.gif) no-repeat center; float:left; display:inline; 
height:250px; cursor:pointer;
}
.ta .next{
	background:url(next.gif) no-repeat center;
}
.ta .inner{
	width:380px; overflow:hidden; float:left; display:inline;
}
.ta ul{
	width:5000px; height:auto; overflow:hidden;
}
.ta ul li{
	width:380px; float:left; display:inline; text-align:center;
}

js代码

$(function(){
		
		$.extend({
			autoChange:function(){
				$('.ta ul').animate({'marginLeft':-380},function(){
					$(this).css('marginLeft',0).find('li:first').appendTo($(this));
					
				
				});
			}
		})
		//_interval = setInterval("$.autoChange()",3000);

      $('.ta .prev').tap(function(){
			
			$('.ta ul').animate({'marginLeft':-380},function(){
				$(this).css('marginLeft',0).find('li:first').appendTo($(this));
			
			});
		},
		function(){});
		
		$('.ta .next').tap(function(){
		
			$('.ta ul').css('marginLeft',-380).find('li:last').prependTo($('.ta ul'));
			$('.ta ul').animate({'marginLeft':0});
			
		
		},
		function(){})

     /*触屏*/
		$(".ta .inner").bind("swipeleft",function(){
 			$('.ta ul').animate({'marginLeft':-380},function(){
				$(this).css('marginLeft',0).find('li:first').appendTo($(this));
			
			});
		});
		
		$(".ta .inner").bind("swiperight",function(){
 			$('.ta ul').css('marginLeft',-380).find('li:last').prependTo($('.ta ul'));
			$('.ta ul').animate({'marginLeft':0});
		});
	})

授人鱼不如授人以鱼,ta.js "钽" 效果可以做到以不变应万变。 越是简单灵活的特效,越是能适应更多的场合下灵活使用。(前提是:你需要有一点点的前端基础。)

演示地址: http://download.keqie.com/projects/ga.js/

下载地址:http://www.keqie.com/thread-9493-1-1.html

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 开源中国社区 [http://www.oschina.net]
本文标题:渴切发布 Ta.js 触摸幻灯片解决方案
分享
评论(21)
最新评论
0
不错,可以更好。
0
看样子还需改进
0
看起来不错
0
链接错了。
0
右边红色箭头离图片的距离和左边灰色箭头离图片的距离不一样。
0
这也能吹成解决方案,我还真以为是什么牛套件和特效,不就是幻灯片,
0
这种破烂也能上首页!
0
。。。。。
无语凝咽了,这都能到新闻里。求高质量新闻呀。
0
这都居然上升到发布这么高的程度,大街上一抓一片,还是先把自己的名字搞清楚吧
0
mark
0
授人以鱼,不如授人以渔
0
到底是Ta还是Ga
0
mark
0
用来做WEB杂志或许不错哟~
0
这里说Ta,点进去变成Ga了
0
主页上不是叫ga么?
0
发现问题: 左右滑动无效。 我用触摸屏笔电测试的
jqm有效
0
jqm这两个事件有bug..
0
不错
0
不错啊
顶部