码迷,mamicode.com
首页 > 移动开发 > 详细

移动web——轮播图

时间:2018-01-15 13:41:50      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:ati   translate   sele   time   char   line   view   需要   initial   

1、我们将5张图片又前后各增加一张,第一张前增加的是原本的第五张,第五张后增加的是原本的第一张,增加的原因无非是手指滑动的时候有轮播效果,这不像以前的轮播图,点击图标就能立刻将ul跳转到指定位置,手机滑动不行

2、当我们手指从第一张向右边方向滑动时,会出现第五张图片,在这个滑动效果结束之后我们跳转到倒数第二张,其实也是第五张;当我们手指从倒数第二张图片向左滑动时,会出现第一张,等这个滑动效果结束之后我们跳转到第二张图片,其实也是第一张图;这里我们必须借助transitionEnd事件

3、手指的滑动的动漫效果的transition事件最好小于定时器图片中的transition时间

4、保险起见,在手指滑动时,需要校验index值,以触发滑动事件的target来进行判断

5、为了在手指滑动的时候立刻响应,小图标在滑动的时候会根据变化了的index值立刻变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .clearfix::before, .clearfix::after {
            content: ‘‘;
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: #c3c3c3;
        }

        .banner {
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .banner ul:nth-child(1) {
            list-style: none;
            width: 700%;
            transform: translateX(-14.28571%);
        }

        .banner ul:nth-child(1) li {
            float: left;
            width: 14.28571%;
            height: 200px;
        }

        .banner ul:nth-child(1) li a {
            width: 100%;
            height: 100%;
            text-decoration: none;
        }

        .banner ul:nth-child(1) li div {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: black;
        }

        .banner ul:nth-child(2) {
            list-style: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -55px;
        }

        .banner ul:nth-child(2) li {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin-left: 10px;
        }

        .yellow {
            background-color: yellow;
        }

        .pink {
            background-color: pink;
        }

        .current {
            background-color: #fff;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="banner">
    <ul class="clearfix">
        <li>
            <a href="#">
                <div class="pink" biao=5>5-</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="yellow" biao=1>1</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="pink" biao=2>2</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="yellow" biao=3>3</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="blue" biao=4>4</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="pink" biao=5>5</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="yellow" biao=1>1-</div>
            </a>
        </li>
    </ul>
    <ul>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var banner = document.querySelector(.banner);
    var moveWidth = banner.offsetWidth;
    var ulLunBo = banner.querySelector(ul:nth-child(1));
    var circleArr = banner.querySelectorAll(ul:nth-child(2) li);
    var moveDistance = 0;
    var index = 0;
    function animation() {
        ulLunBo.style.transition = all .6s;
        index++;
        moveDistance = -moveWidth * index;
        ulLunBo.style.transform = translateX( + moveDistance + px);
        console.log(index + == + moveDistance);

        //小圆点根据index发生变化

        for (var i = 0; i < circleArr.length; i++) {
            circleArr[i].className = ‘‘;
        }
        if (index > 5) {
            circleArr[0].className = current;
            return;
        }
        if (index < 1) {
            circleArr[5].className = current;
            return;
        }
        circleArr[index - 1].className = current;
    }

    var timer = setInterval(animation, 1000);
    ulLunBo.addEventListener(webkitTransitionEnd, function () {
        if (index > 5) {
            index = 1;
        } else if (index < 1) {
            index = 5;
        }
        circleArr[index - 1].className = current;
        ulLunBo.style.transition = ‘‘;
        moveDistance = -moveWidth * index;
        ulLunBo.style.transform = translateX( + moveDistance + px);
    });

    var startX = 0;
    var moveX = 0;
    var distance = 0;
    var freeMove = 0;
    ulLunBo.addEventListener(touchstart, function (e) {
        clearInterval(timer);
        distance = moveDistance;
        ulLunBo.style.transition = ‘‘;
        startX = e.touches[0].clientX;
    })
    ulLunBo.addEventListener(touchmove, function (e) {
        moveX = e.touches[0].clientX - startX;
        freeMove = distance + moveX;
        ulLunBo.style.transform = translateX( + freeMove + px);
    })
    //吸附效果是重点
    //1、当自由移动距离freeMove的绝对值与清除定时器前的moveDistance的绝对值进行比较的cha值进行判断
    //2、cha值小于moveWidth的一半在touchend的事件中需要归位到moveDistance的位置
    //3、cha值大于moveWidth的一半在touchend的事件中需要根据cha值的正负情况向左或者向右前进1个moveWidth
    //4、根据第三步,我们还需要将index的值进行改变,因为我们最终移动了ulLunBo的位置
    var triggerValue = null;
    ulLunBo.addEventListener(touchend, function (e) {
            ulLunBo.style.transition = all .3s;
            triggerValue = e.target.getAttribute(biao);
            var cha = Math.abs(freeMove) - Math.abs(moveDistance);
            if (cha >= moveWidth / 2) {
                //左边移动距离大于宽度的一半
                moveDistance -= moveWidth;
                index = parseInt(triggerValue) + 1;
            } else if (cha <= (-moveWidth / 2)) {
                //右边移动距离大于宽度的一半
                moveDistance += moveWidth;
                index = parseInt(triggerValue) - 1;
            } else {
                //向左向右移动距离小于宽度的一半
                moveDistance = moveDistance;
            }
            if (index > 5) {
                index = 1;
            } else if (index < 1) {
                index = 5;
            }
            for (var i = 0; i < circleArr.length; i++) {
                circleArr[i].className = ‘‘;
            }
            circleArr[index - 1].className = current;
            ulLunBo.style.transform = translateX( + moveDistance + px);
            timer = setInterval(animation, 1000);
        }
    );
</script>
</body>
</html>

 技术分享图片

移动web——轮播图

标签:ati   translate   sele   time   char   line   view   需要   initial   

原文地址:https://www.cnblogs.com/wuqiuxue/p/8287555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!