移动端原生JS轮播图，

移动端仿京东轮播图，实现了自动轮播，手动轮播，但存在bug
HTML代码

 <div class="banner">
            <ul class="b_content">
                <li class="banner_li">
                    <img src="img/uploads/l1.jpg" alt="" class="img">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l2.jpg" alt="">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l3.jpg" alt="">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l4.jpg" alt="">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l5.jpg" alt="">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l6.jpg" alt="">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l7.jpg" alt="">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l8.jpg" alt="">
                </li>
                <li class="banner_li">
                    <img src="img/uploads/l1.jpg" alt="" class="img">
                </li>
            </ul>
        </div>

css代码

.banner {
    width: 100%;
    margin-top: -85px;
    overflow: hidden;
    position: relative;
}

.b_content {
    width: 900%;
    display: flex;
    position: absolute;
    left: -0;
    transition: none;
}

.banner_li {
    padding-left: 15px;
    padding-right: 15px;
}

.banner_li img {
    width: 100%;
    border-radius: 10px;
}

js代码

// 轮播图事件
function slideshow($b_content, $banner_img) {
    var index = 0
    var startX = 0
    var endX = 0
    var moveX = endX - startX
    var ismove = true
    var zd = setInterval(automatic, 3000);

    // 手指接触
    $b_content.addEventListener('touchstart', function (e) {
        clearInterval(zd);
        startX = e.targetTouches[0].clientX

        console.log('开始' + startX);
    })
    // 手指移动
    $b_content.addEventListener('touchmove', function (e) {
        var dd=e.targetTouches[0].clientX
        this.style.left = -(index * ($banner_img.width + 30)) + (dd-startX) + 'px'
        
        console.log(dd-startX)
    })
    // 手指离开
    $b_content.addEventListener('touchend', function (e) {
        endX = e.changedTouches[0].clientX
        // console.log(e.changedTouches[0].clientX);
        moveX = endX - startX
        // console.log('结束' + endX);
        if (moveX > 100) {
            ismove = false
            automatic()
        } else if (moveX < -100) {
            ismove = true
            automatic()
        } else {
            this.style.left = -(index * ($banner_img.width + 30)) + 'px'
        }
        ismove = true
        zd = setInterval(automatic, 2000);
    })


    // 轮播

    function automatic() {
        if (ismove) {
            if (index == 8) {
                index = 0
                $b_content.style.transition = '0s'
                $b_content.style.left = -0 + 'px'
                // console.log( $b_content.style.transition);
            }
        } else {
            if (index == 0) {
                index = 8
                $b_content.style.transition = '0s'
                $b_content.style.left = - (8 * ($banner_img.width + 30)) + 'px'
            }
        }
        // console.log(ismove)
        ismove ? index++ : index--
        var imgW = $banner_img.width + 30;
        var offset = - (index * imgW);
        $b_content.style.transition = '0.5s'
        $b_content.style.left = offset + 'px'
        // console.log(index)
    }
    // 实现自动轮播
}

这个版本单纯的实现了功能，还存在问题，有待改进