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. hdu 3062 2-sat

    #include<stdio.h> #include<string.h> #define N 2100 struct node { int u,v,next; }bian[N* ...

  2. nyoj_116_士兵杀敌（二）_201404131107

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...

  3. zoj——3556 How Many Sets I

    How Many Sets I Time Limit: 2 Seconds      Memory Limit: 65536 KB Give a set S, |S| = n, then how ma ...

  4. Ubuntu 16.04在启动和关机时不显示启动和关机画面且显示详细的命令信息，没有进度条和Logo，或者只有紫色界面，或者没有开机画面等问题解决

    主要有以下解决方法: 1.如果之前配置过Grub来显示详细的命令信息的,那么改回去就行了,参考:http://www.cnblogs.com/EasonJim/p/7129873.html,通过这种方 ...

  5. Chrome浏览器扩展开发系列之十四：本地消息机制Native messagin

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器 ...

  6. LeetCode 463. Island Perimeter （岛的周长）

    You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...

  7. 暴力解hdu4930Fighting the Landlords

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...

  8. 更改App.config里的值并保存

    using System; using System.Collections.Generic; using System.Configuration; using System.IO; using S ...

  9. JMeter常用函数 使用图解

    函数的调用都是以${__function()}这种形式开始的注意:“__”是两个英文下划线 __UUID 生成唯一字符串

  10. Linux gadget驱动分析2------设备识别过程

    设备连上主机之后,设备驱动做了的事. 设备连上host的port之后,主机端会有一套策略发送请求获取device的一系列描述符.进行枚举过程.找到适合该device的驱动. 这样就可以与device进 ...