仿iPhone、iPad界面滑屏切换

<!DOCTYPE html>

<html lange='en'>

<head>

    <meta charset='UTF-8'>

    <title></title>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

    <style>

        * {

        margin: 0;

        padding: 0;

    }

    #div1 {

        width: 670px;

        height: 250px;

        position: relative;

        margin: 50px;

        overflow: hidden;

        background: pink;

    }

    #ul1 {

        position: absolute;

        left: 0;

    }

    #ul1 li {

        width: 670px;

        height: 250px;

        float: left;

        list-style: none;

    }

     #ul1 li img{

     	 width: 670px;

     }

    </style>

</head>

<body>

    <div id="div1">

        <ul id="ul1">

            <li><img src="img/1.jpg"></li>

            <li><img src="img/2.jpg"></li>

            <li><img src="img/3.jpg"></li>

            <li><img src="img/4.jpg"></li>

            <li><img src="img/5.jpg"></li>

        </ul>

    </div>

</body>

</html>

<script type="text/javascript">

var oDiv = document.getElementById('div1');

var oUl = document.getElementById('ul1');

var aLi = oUl.getElementsByTagName('li');

var w = aLi[0].offsetWidth;

oUl.style.width = aLi.length * w + 'px';

var downLeft = 0;

var donwX = 0;

var iNow = 0;

var downTime = 0;

var bBtn;

oUl.ontouchstart = function(ev) {

	console.log(1)

    var touchs = ev.changedTouches[0];

    donwX = touchs.pageX;

    downLeft = this.offsetLeft;

    bBtn = true;

    downTime = Date.now();

}

// console.log(donwX)

oUl.ontouchmove = function(ev) {

    var touchs = ev.changedTouches[0];

    if (this.offsetLeft >= 0) {

        if (bBtn) {

            donwX = touchs.pageX;

            bBtn = false;

        }

        this.style.left = (touchs.pageX - donwX) / 3 + 'px';

        console.log(1)

    } else if (this.offsetLeft <= oDiv.offsetWidth - oUl.offsetWidth) {

    	console.log(oDiv.offsetWidth - oUl.offsetWidth)

        if (bBtn) {

            donwX = touchs.pageX;

            bBtn = false;

        }

        this.style.left = (touchs.pageX - donwX) / 3 + (oDiv.offsetWidth - oUl.offsetWidth) + 'px';

        console.log(2)

    } else {

        // debugger;

        this.style.left = touchs.pageX - donwX + downLeft + 'px';

        // console.log(touchs.pageX - donwX + downLeft+'this is')

        console.log(3)

    }

}

oUl.ontouchend = function(ev) {

    var touchs = ev.changedTouches[0];

    if (touchs.pageX < donwX) { //左

        if (iNow < aLi.length - 1) {

            // alert(Date.now() - downTime<300)

            if (donwX - touchs.pageX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && donwX - touchs.pageX > 30)) {

                iNow++;

            }

        }

        $('#ul1').animate({ 'left': -iNow * w });

    } else { //右

        // debugger;

        if (iNow > 0) {

            if (touchs.pageX - donwX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && touchs.pageX - donwX > 30)) {

                iNow--;

            }

        }

        $('#ul1').animate({ 'left': -iNow * w });

    }

}

</script>

<!--

1、用户划动超过图片的一半或者用户快速的滑过时才滚动一页

2、如果是在第1页，或者最后一页时移动的速度放慢3倍。

 -->
巴特西

仿iPhone、iPad界面滑屏切换

最新文章

热门文章
