渴切發布 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