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——轮播图的更多相关文章

  1. 移动Web轮播图IOS卡顿的问题

    晚饭前,被测试吐槽说,banner轮播手动左右滑的时候会卡顿.我一看不科学啊,大水果手机怎么会卡顿.我一看测试手中拿的是iPod,我觉得大概是这小玩意性能不强悍,后来又拿来5S,依然会卡顿,有趣的是, ...

  2. 移动端web轮播图插件swiper，功能很强大

    使用方法示例: <div class="swiper-container"> <div class="swiper-wrapper"> ...

  3. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  5. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  6. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  7. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  8. Web前端JS实现轮播图原理

    实现轮播图有很多方式,但是html的结构都是一样的.本文使用了Jquery框架,Dom操作更加方便灵活 html部分: <div class="banner"> < ...

  9. [Web] 通用轮播图代码示例

    首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/ ...

随机推荐

  1. sdibt 1251 进化树问题

    /* 三个点的话 A--D--B | C dis(AD)=(AB+AC-BC)/2; 拓展到到n个点 每次去叶子节点,先去掉与A相连长度最小的. 将他们的长度加起来. */ #include<s ...

  2. codevs——2645 Spore

    2645 Spore  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 某陈和某Y 最近对一个游戏着迷.那 ...

  3. 基本的数据类型分析----java.lang.Number类及其子类分析

    本文转自http://blog.csdn.net/springcsc1982/article/details/8788345 感谢作者 编写了一个测试程序,如下: int a = 1000, b= 1 ...

  4. maven更改镜像路径为阿里镜像，以便下载速度快

    1.maven更改镜像路径为阿里镜像,以便下载速度快 2.maven每更新一次镜像地址,都会重新下载一次包 3. 怎么配maven链接阿里云的镜像详细步骤 修改maven根目录下的conf文件夹中的s ...

  5. HTTP状态码图示

    这里总结下我们日常开发中常用的HTTP状态码,分享一个老外对HTTP状态码形象化用图片表示的网站:https://http.cat/ 总结如下: 表示服务器已经接收到了请求头,并且客户端应该继续发送请 ...

  6. openCV—Python(2)—— 载入、显示和保存图像

    一.函数简单介绍 1.imread-读取图像 函数原型:imread(filename, flags=None) filename:读取的图像路径名:比如:"H:\img\lena.jpg& ...

  7. iOS常用的正则表达式总结

    /* 正则表达式说明: . 匹配除换行符以外的任意字符 \\w 匹配字母或数字或下划线或汉字 \\s 匹配任意的空白符 \\d 匹配数字 \\b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字 ...

  8. Android高仿UC浏览器和360手机卫士消息常驻栏（通知栏）

    之前网上看了下自己定义消息栏,通知栏,了解到了Notification这个控件.发现UC浏览器等都是这样的类型,今天写个demo实现下.如图: 当中每一个button都有不同的功能.代码例如以下: p ...

  9. 关于C语言指针的一些新认识（1）

    Technorati 标签: 指针,数组,汇编,C语言 前言 指针是C语言的精华,但我对它一直有种敬而远之的感觉,因为一个不小心就可能让你的程序陷入莫名其妙的麻烦之中.所以,在处理字符串时,我总是能用 ...

  10. 对数据html文本 的处理

    对数据html文本 的处理  : 提取文字.图片.分句 ''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 ...