[JavaScript]手机滑动图片

时间：2021-11-23 00:41:50

思路

　　1.用ul ,li 来装载滑动的图片，超出部分隐藏

　　2.滑动是通过改变ul的位置来实现

布局

[JavaScript]手机滑动图片

模块

　　1: 根据li元素个数去设置ul的宽度

　　　　1.1 获取ul元素

　　　　1.2 获取li元素的个数

　　　　1.3 设置ul元素的宽度

　　2: ul实现拖拽移动功能

　　　　Ul元素移动的距离 = 鼠标移动横坐标只差

　　　　Ul元素的新位置 = Ul的位置标 + Ul元素移动的距离

　　　　Ul元素可以通过translateX 来进行动画

　　　　2.1: 获取ul元素的旧位置(触碰ul元素时的translateX值)

　　　　2.2: 获取手指触碰的坐标x1

　　　　2.3: 获取手指移动的坐标x2

　　　　2.4: 计算Ul的新位置

　　　　2.5: 设置Ul的位置

<!doctype html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<meta name="Keywords" content="">

		<meta name="Description" content="">

		<title>手机滑动插件swiper</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            body,

            .content{

                display: flex;

                align-items: center;

                width: 100vw;

                height: 100vh;

            }

            .swiper{

                width: 100%;

                height: 100%;

                overflow: hidden;

            }

            .swiper ul{

                width: 300%;

                height: 100%;

                list-style: none;

            }

            .swiper ul li{

                display: flex;

                justify-content: center;

                align-items: center;

                float: left;

                width: calc( 100% / 3);

                height: 100%;

            }

            .swiper ul li img{

                display: block;

                width: 60%;

                height: 60%;

            }

		</style>

	</head>

	<body>

        <div class="content">

            <div class="swiper">

                <ul>

                    <li><img src="data:images/01.jpg" alt=""></li>

                    <li><img src="data:images/02.jpg" alt=""></li>

                    <li><img src="data:images/03.jpg" alt=""></li>

                </ul>

            </div>

        </div>

	</body>

	<script>

        var data = {

            oUl : document.querySelector('ul'),

            aLi : document.querySelectorAll('li'),

            time : '0.5s'

        }

        swiper(data);

        function swiper(data){

            data.oUl.style.width = data.aLi.length+'00%';

            for (var index = 0 ; index < data.aLi.length ; index++) {

                data.aLi[index].style.width = 100/(data.aLi.length)+'%';

            }

            data.oUl.addEventListener('touchstart',touch);   //当手指触摸屏幕时候触发

            data.oUl.addEventListener('touchmove',touch);    //当手指在屏幕上滑动的时候连续地触发

            data.oUl.addEventListener('touchend',touch);     //当手指从屏幕上离开的时候触发

            data.startX = 0; //移动存放初始位置

            data.oUl.transform = {}; //存放transform的变化值

        };

        function touch(ev){

            ev = ev || window.event ;   //获取手指事件

            switch (ev.type) {

                case 'touchstart':

                    data.startX = cssTransform(data.oUl,'translateX') || 0 ;

                    x1 = ev.changedTouches[0].pageX;

                    data.oUl.style.transition = '0s';

                    break;

                case 'touchmove':

                    var x2 = ev.changedTouches[0].pageX;

                    var nowX = data.startX + x2 - x1;

                    cssTransform(data.oUl,'translateX',nowX);

                    break;

                case 'touchend':    //松开时 图片是拉取还是回撤

                    var offset = data.oUl.transform['translateX'];

                    offset = Math.min( 0 , offset );

                    offset = Math.max( -(data.aLi.length-1) * data.aLi[0].offsetWidth , offset );

                    var num = Math.round( - offset / data.aLi[0].offsetWidth );

                    cssTransform(data.oUl,'translateX',-num*data.aLi[0].offsetWidth);

                    data.oUl.style.transition = data.time;

                    break;

            }

        }

        /*****

        *@paran:设置或获取一个元素的transform的值

        *@obj:待操作的元素

        *@attr:待操作的属性

        *@var:待设置的值

        *传两个参数是获值，三个参数是这是值

        **/

        function cssTransform(obj , attr , val){

            switch (arguments.length) { //传参的个数

                case 3:

                    obj.transform[attr] = val;

                    var str = '' ;  //待设置的属性值,拼接而成

                    for (var key in obj.transform) {

                        switch (key) {

                            case 'translate':

                            case 'translateX':

                            case 'translateY':

                            case 'translateZ':

                                str += key+'('+obj.transform[key]+'px)';

                        }

                    }

                    obj.style.transform = str;

                    break;

                case 2:

                    var val = obj.transform[attr];

                    if ( typeof val === 'undefined' ) {

                        val = 0;

                    }

                    return val;

                    break;

            }

        };

	</script>

</html>

　　

相关文章