移动端的无缝轮播图片

第1步：在head部分设置meta，设置html字体大小，以及阻止pc和浏览器默认行为

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<script>
    //获取html
    var html = document.documentElement;
    //设置html的字体大小 = 可视区的宽度 / 15
    html.style.fontSize = html.clientWidth / 15 + 'px';
    //阻止pc和浏览器默认行为。
    document.addEventListener('touchstart',function(ev){
        ev.preventDefault();
    }, {passive: false});
</script>

第2步：设置布局

<section class="wrap">
    <ul class="list">
        <li>
            <img src="img/img.jpg" alt="" />
        </li>
        <li>
            <img src="img/img2.jpg" alt="" />
        </li>
        <li>
            <img src="img/img3.jpg" alt="" />
        </li>
        <li>
            <img src="img/img4.jpg" alt="" />
        </li>
    </ul>
    <nav>
        <a href="javascript:;" class="active"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </nav>
</section>

第3步：设置css

<style>
body{
    margin: 0;
}
.wrap{
    height: 4.68rem;
    position: relative;
}
.list{
    padding: 0;
    margin: 0;
    400%;
    position: absolute;
    top:0;
    left:0;
    list-style: none;
}
.list li{
    float: left;
    15rem;
}
.list img{
    15rem;
    display: block;
}
nav{
    15rem;
    height: 10px;
    position: absolute;
    bottom:5px;
    z-index: 1;
    text-align:center;
}
nav a{
    15px;
    height: 15px;
    display: inline-block;
    background: red;
    border-radius:50%;
    vertical-align:top;
}
nav a.active{
    background:#fff;
}
</style>

第四步：js部分

var wrap = document.querySelector('.wrap'),
    list = document.querySelector('.list'),
    a = document.querySelectorAll('a'),
    divX = 0, // 按下的坐标
    listL = 0, // 当前按下list的left值
    w = wrap.clientWidth, // 一张图片的宽度
    len = 0, // 个数
    n = 0; // 默认第一个小点为白色

// 两组图片，当点击第一组的第一张时，迅速切换到第二组的第一张
// 实现无缝无限滚动
list.innerHTML += list.innerHTML;
len = list.children.length;
list.style.width = w * len + 'px';

list.addEventListener('touchstart', start);
list.addEventListener('touchmove', move);
list.addEventListener('touchend', end);
// 按下时
function start(ev) {
    list.style.transition = 'none';
    var e = ev.changedTouches[0];
    disX = e.pageX;

    /*
     *  在按下的时候，要知道当前点击的是第几张图片 
     *  如果是第一张，快速拉到第5张的位置上
     */
    var num = Math.round(list.offsetLeft / w);
    if(num === 0){
        num = a.length;
        list.style.left = -num * w + 'px';
    }
    if(-num === len-1){
        num = a.length - 1;
        list.style.left = -num * w + 'px';
    }
    // 做完相应处理后，将当前的offsetLeft赋值给listL
    listL = this.offsetLeft;
}
// 移动
function move(ev){
    var e = ev.changedTouches[0];
    list.style.left = e.pageX - disX + listL + 'px';
}
// 抬起
function end(ev){
    // 四舍五入
    var num = Math.round(list.offsetLeft / w);
    list.style.transition = '.5s';
    // 当前的宽度 = 张数 * 每一张的宽度
    list.style.left = num * w + 'px';

    // 清空上一个n的class
    a[n].className = '';
    // 给当前图片对应的小点设置class
    a[-num % a.length].className = 'active';
    // 将n设置为当前图片的num
    n = -num % a.length;
}

所用的四张图片如下：

·