模拟腾讯、携程、百度音乐 移动端图片切换第一版

1.啥也不说看看标题中的那些名企的效果

 

2.具体实现过程(晚上详细解释具体实现细节，先贴出代码)

   

  var disX = 0;
            var initLeft = 0;

            oUl.addEventListener('touchstart', function (ev) {
                var oEvent = ev || event;
                oEvent.preventDefault();
                var touch = oEvent.touches[0];
                disX = touch.clientX;
                initLeft = this.offsetLeft;
            });


            oUl.addEventListener('touchmove', function (ev) {
                var oEvent = ev || event;
                oEvent.preventDefault();
                if (oEvent.targetTouches.length == 1) {
                    var touch = oEvent.touches[0];
                    var moveDisx = initLeft + touch.clientX - disX;

                    if (moveDisx <= -this.offsetWidth / 2) {
                        this.style.left = 0;
                    }
                    else if (moveDisx >0) {
                        this.style.left = -this.offsetWidth / 2 + moveDisx + 'px';
                    }
                    else {
                        this.style.left = moveDisx + 'px';
                    }
                }

            }, false);

            oUl.addEventListener('touchend', function (ev) {


                var linear = this.offsetLeft > 0 ? true : false;
                var currIndex = Math.round(Math.abs(this.offsetLeft) / 320.0);
                document.title = currIndex;
                $(this).stop(true).animate({ "left": linear?(currIndex * w):(currIndex * -w) + 'px' }, 'slow');

            });

3、扫二维码查看效果

   

4、本公司（上海徐汇区附近）招聘信息asp.net程序员

    如果你觉得你现在的工作没有趣味，项目太死板加入我们公司

    如果你喜欢移动端开发(如微信，wap网站，以及移动端前端效果，我们公司不会让你失望的，技术氛围很好，乐于分享)

    无论你是刚出来的新人(基础扎实)，还是多年的老鸟 这里都有你的一席之地

    只要你有能力，薪资往往不是问题

    如果你真心诚意找工作，将个人简历发送至我的163邮箱 aspnetzjf@163.com