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

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