原生JS多图轮播 / transform制作

gif有点模糊哈~看个大概效果就好，效果如下： 

 HTML如下：

我这里是一共轮播 7 张图片，但是只显示 4 张图片循环轮播；

额外添加四张在后面是因为后续达到最后一张时，不会存在空白页；

达到第 7 张时，显示的就是 7-1-2-3 的图片；

最后添加一个图片4，是执行最后一次移动时不存在空白。

<div class="banner">
    <ul>
        <li><img alt="1" src="../../assets/广东省教育厅.png" ></li>
        <li><img alt="2" src="../../assets/广州公共资源交易中心.png"></li>
        <li><img alt="3" src="../../assets/广州市教育局.png"></li>
        <li><img alt="4" src="../../assets/广州市人民政府.png"></li>
        <li><img alt="5" src="../../assets/广州市政府采购平台.png"></li>
        <li><img alt="6" src="../../assets/教育部.png"></li>
        <li><img alt="7" src="../../assets/教育部教育装备研究.png"></li>

        <!-- 额外四张 -->
        <li><img alt="1" src="../../assets/广东省教育厅.png" ></li>
        <li><img alt="2" src="../../assets/广州公共资源交易中心.png"></li>
        <li><img alt="3" src="../../assets/广州市教育局.png"></li>
        <li><img alt="4" src="../../assets/广州市人民政府.png"></li>
    </ul>
  </div >

 CSS如下：

css比较简单，应该就不用解释太多了吧~

要讲的应该就这一个：

overflow: hidden 是将超出部分隐藏。

.banner {
    width: 100%;
    height: 110px;
    overflow: hidden;
    border: #ebebeb 1px solid; 
}

.banner ul {
    /* 如果宽度太宽，导致换行，请增加这里的宽度 */
    width: 300%;
    height: 100%;
    margin-top: 7px;
}

.banner ul li {
    float: left;
    /* 这里的宽度设置，使得轮播图保持一行 */
    width: 8.34%;
}

.banner ul li img {
    width: 96%;
}

JS如下：

js部分参照这篇文章，这位大佬写的真的详细太棒啦~

原生js轮播图 transform方法！_js 使用transform_猿来如此hhh的博客-CSDN博客

// 轮播图
var banner = document.querySelector('.banner'); //获取banner
var ul = banner.children[0]; //获取ul
var bannerW = banner.offsetWidth; //获取 banner的宽度
var index = 0; //设置一个变量
var flage = false;

// 定时2s，移动一次轮播图
var timer = setInterval(function() {
    index++; //让 index++  来改变移动距离
    var traX = - index * bannerW * 0.25; // 移动一次的距离
    ul.style.transition = 'all 1s' //渐变
    ul.style.transform = 'translateX(' + traX + 'px)'; //让ul移动
}, 2000)

//当轮播图动循环播放一次后
ul.addEventListener('transitionend', function() {
    // 这里填写图片总数
    if (index >= 7) {
        index = 0 //如果 index大于4  就让它等于0  回到原点
        var traX = -index * bannerW;
        ul.style.transition = 'none'; //不加 动画效果
        ul.style.transform = 'translateX(' + traX + 'px)'; //移动过来
    } else if (index < 0) {
        index = 0; //当他小于0   就让她 到最后一张的位置上
        let traX = -index * bannerW;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + traX + 'px)';
    }
})

var starX = 0; //设置 手指动的初始位置
var moveX = 0; //设置 移动的初始值

ul.addEventListener('touchstart', function(e) {
    starX = e.targetTouches[0].pageX; //得到手指触摸的位置
    clearInterval(timer); //手指一碰 就清除定时器
})

ul.addEventListener('touchmove', function(e) {
    moveX = e.targetTouches[0].pageX - starX; //得到手指移动的距离
    var tx = moveX + (-index * bannerW); //得到  ul需要移动的距离
    ul.style.transition = 'none';
    ul.style.transform = 'translate(' + tx + 'px)';
    flage = true; //这里是一个 判断条件  如果 手指移动了就等true  没移动一直是false 不考虑下一步
    e.preventDefault(); //清除默认
})
ul.addEventListener('touchend', function() {
    if (flage) { //当它等于true 的时候
        if (Math.abs(moveX) > 50) { //当 移动的距离 的绝对值大于50px的时候
            if (moveX > 0) { //因为可以左右滑动 向右滑的时候  他的值时大于0的 
                index--; //所以  就让index--  也就是说  让 ul回到上一张图片的位置
            } else {
                index++; //同理  回到 下一张图片的位置  
            }
            let tx = -index * bannerW;
            ul.style.transition = 'all 1s';
            ul.style.transform = 'translate(' + tx + 'px)';

        } else { //当它  小于 50px 的时候 不做改变
            let tx = -index * bannerW;
            ul.style.transition = 'all .5s';
            ul.style.transform = 'translate(' + tx + 'px)';
        }
        clearInterval(timer); //当你手指移开的时候先清除 定时器 
        timer = setInterval(function() {
            index++;
            var traX = -index * bannerW;
            ul.style.transition = 'all 1s'
            ul.style.transform = 'translateX(' + traX + 'px)';
        }, 2000) //再添加定时器
    }
})