一个简单的特效引发的大战之移动开发中我为什么放弃jquery mobile

<div class="mbSlider">
    <ul>
        <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;">
            <a href="http://www.pushself.com"></a>
        </li>
        <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;">
            <a href="http://www.pushself.com"></a>
        </li>
        <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;">
            <a href="http://www.pushself.com"></a>
        </li>
    </ul>
</div>

.mbSlider ul {
  position: relative;
  z-index: 0;
  height: 120px;
  overflow: hidden;
}
.mbSlider ul li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  visibility: hidden;
}
.mbSlider ul li, .mbSlider ul a {
  display: block;
  width: 100%;
  height: 100%;
}
.mbSlider ul li:nth-child(1) {
  visibility: visible;
}

(function(i) {
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        name = option.name,
        AutoMain = function() {
            this.mbSlider = function() {
                var mbSliderThis = this,
                    directionArr = ["left","right"];
                    liLength = $("." + name + " ul li").length,
                    duration = i.duration in directionArr?i.duration:"left",
                    initVal = i.initVal && i.initVal<liLength?parseInt(i.initVal):0,
                    mbSliderHeight = $("." + name + " ul").height(),
                    mbSliderHeight = mbSliderHeight > 120 && mbSliderHeight < windowHeight / 3?mbSliderHeight:120;
                $("." + name + " ul").height(mbSliderHeight);//banner不能过大
                if(liLength < 2) {
                    return;
                }else if(liLength == 2) {//便于切换流畅
                    $("." + name + " ul").append($("." + name + " ul").html());
                    liLength = $("." + name + " ul li").length;
                }
                var direction = i.direction,
                    t;
                mbSliderThis.run = function(direction){
                    Action.apply(this,{
                                0: direction,
                                1: initVal,
                                2: liLength,
                        "length" : 3
                    })
                    initVal = initVal == liLength - 1?0:++initVal;
                    t = setTimeout(function() {
                        mbSliderThis.run(direction);
                    },3000);
                }
                $("." + name + " ul li").css({
                    "-webkit-transition-duration":i.duration + "s"
                });
                mbSliderThis.run(direction);
                $("." + name + " ul li").swipeLeft(function() {
                    var direction = "right";
                    clearInterval(t);
                    mbSliderThis.run(direction);
                });
                $("." + name + " ul li").swipeRight(function() {
                    var direction = "left";
                    clearInterval(t);
                    mbSliderThis.run(direction);
                });
            };
        },
        Action = function(direction,initVal,liLength) {
            var liLength = liLength;
            if(direction == "right") {
                var currLiNum = initVal,
                    prevLiNum = currLiNum == 0?liLength - 1:currLiNum - 1,
                    nextLiNum = currLiNum == liLength - 1?0:currLiNum + 1;
                    directionVal = 1;
            }else {
                var currLiNum = initVal == 0?0:-initVal,
                    prevLiNum = currLiNum == 0?-liLength + 1:currLiNum + 1,
                    nextLiNum = currLiNum == -liLength + 1?0:currLiNum - 1;
                    directionVal = -1;
            }
            var prevLiWidth = -windowWidth * directionVal,
                currLiWidth = 0,
                nextLiWidth =  windowWidth * directionVal;
            $("." + name + " ul li").eq(prevLiNum).css({
                "-webkit-transform":"translate3d(" + prevLiWidth + "px, 0, 0)",
                "visibility":"hidden"
            });
            $("." + name + " ul li").eq(currLiNum).css({
                "visibility":"visible",
                "-webkit-transform":"translate3d(" + currLiWidth + "px, 0, 0)"
            });
            $("." + name + " ul li").eq(nextLiNum).css({
                "-webkit-transform":"translate3d(" + nextLiWidth + "px, 0, 0)",
                "visibility":"hidden"
            });
        },
        autoMain = new AutoMain().mbSlider();
})(option)
var option = {"name":"mbSlider","direction":"right","duration":".8","initVal":0};