html

<div class="container">
            <div class="wrap" style="left:-600px;">
                <img src="./img/4.png" alt="" class="img">
                <img src="./img/1.png" alt="" class="img">
                <img src="./img/2.png" alt="" class="img">
                <img src="./img/3.png" alt="" class="img">
                <img src="./img/4.png" alt="" class="img">
                <img src="./img/1.png" alt="" class="img">
            </div>
            <div class="buttons">
                <span class="btnIndex">1</span>
                <span class="btnIndex">2</span>
                <span class="btnIndex">3</span>
                <span class="btnIndex">4</span>
            </div>
            <a href="javascript:;" class="arrow arrow_left"><</a>
            <a href="javascript:;" class="arrow arrow_right">></a>
        </div>

css

* {
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
}
.container {
    position: relative;
    width: 100vw;
    height: calc(100vh - 56px);
    box-shadow: 0 0 5px green;
    overflow: hidden;
}            
.wrap {
    position: absolute;
    width: 700vw;
    height: calc(100vh - 56px);
    z-index: 1;
}
img{
    background-color: coral;
}
.container .wrap img {
    float: left;
    width: 100vw;
    height: calc(100vh - 56px);
}
.container .buttons {
    position: absolute;
    right: 150px;
    bottom:20px;
    width: 200px;
    height: 10px;
    z-index: 2;
}
.container .buttons span {
    margin-left: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: green;
    text-align: center;
    color:white;
    cursor: pointer;
}
.container .buttons span.on{
    background-color: red;
}
.container .arrow {
    position: absolute;
    top: 35%;
    color: green;
    padding:0px 14px;
    border-radius: 50%;
    font-size: 50px;
    z-index: 2;
    display: none;
}
.container .arrow_left {
    left: 10px;
}
.container .arrow_right {
    right: 10px;
}
.container:hover .arrow {
    display: block;
}
.container .arrow:hover {
    background-color: rgba(0,0,0,0.2);
}

js

var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function () {
    next_pic();
}
var index = 0;
// var dots = document.getElementsByTagName("span");
var dots = document.getElementsByClassName("btnIndex")
dots[index].className = "on btnIndex";
function showCurrentDot() {
    for (var i = 0, len = dots.length; i < len; i++) {
        dots[i].className = "btnIndex";
    }
    dots[index].className = "on btnIndex";
}
prev.onclick = function () {
    prev_pic();
}
var prev_vw;
var prev_index;
let vw = document.body.clientWidth
// console.log(vw)
wrap.style.left = -vw + "px";
// console.log(wrap.style.left )
prev_index = parseInt(wrap.style.left)/vw
// console.log(prev_index)
window.onresize = function(){
    let vw = document.body.clientWidth
    // console.log(vw)
    // console.log(wrap.style.left)
    wrap.style.left = prev_index*vw + "px";
}
function next_pic() {
    let vw = document.body.clientWidth
    wrap.style.left = prev_index*vw + "px";
    var newLeft;
   //Math.abs(parseInt(wrap.style.left)-4*vw) < 20
    //parseInt(wrap.style.left) == -4*vw
    // console.log(vw)
    // console.log(wrap.style.left)
    if ( parseInt(wrap.style.left) == -4*vw) {
        console.log("进来")
        newLeft = -1*vw;
    } else {
        newLeft = parseInt(wrap.style.left) - vw;
    }
    prev_index = newLeft/vw
    wrap.style.left = newLeft + "px";
    // console.log(vw)
    console.log(wrap.style.left)
    index++;
    if (index > 3) {
        index = 0;
    }
    console.log(index)
    showCurrentDot();
}
function prev_pic() {
    let vw = document.body.clientWidth
    // console.log(vw)
    wrap.style.left = prev_index*vw + "px";
    var newLeft;
    if (parseInt(wrap.style.left) == -1*vw) {
        newLeft = -4*vw;
    } else {
        newLeft = parseInt(wrap.style.left) + vw;
    }
    prev_index = newLeft/vw
    wrap.style.left = newLeft + "px";
    index--;
    if (index < 0) {
        index = 3;
    }
    showCurrentDot();
}
var timer = null;
function autoPlay() {
    timer = setInterval(function () {
        next_pic();
    }, 3000);
}
autoPlay();
var container = document.querySelector(".container");
container.onmouseenter = function () {
    clearInterval(timer);
}
container.onmouseleave = function () {
    autoPlay();
}
for (var i = 0, len = dots.length; i < len; i++) {
    (function (i) {
        dots[i].onclick = function () {
            let vw = document.body.clientWidth
            wrap.style.left = prev_index*vw + "px";
            var dis = index - i;
            if (index == 4 && parseInt(wrap.style.left) !== -5*vw) {
                dis = dis - 5;
            }
            //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
            if (index == 0 && parseInt(wrap.style.left) !== -vw) {
                dis = 5 + dis;
            }
            // console.log(dis)
            prev_index = (parseInt(wrap.style.left) + dis * vw)/vw
            wrap.style.left = (parseInt(wrap.style.left) + dis * vw) + "px";
            index = i;
            showCurrentDot();
        }
    })(i);
}
$(".img").on("click",function(){
    console.log("img")
    console.log($(this).index())
})