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
jqm有效