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

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邮箱 [email protected]