js轮播图

//html部分

<div class="banner">
        <div class="cont">
            <img src="img/banner.webp" width="1920px"  alt="">
            <img src="img/banner2.webp" width="1920px" alt="">
            <img src="img/banner6.webp" width="1920px" alt="">
            <img src="img/banner5.webp" width="1920px" alt="">
        </div>
        <div class="pre">&#xe6af;</div>
        <div class="next">&#xe602;</div>
        <div class="nods">
            <div class="dd changr-color"></div>
            <div class="dd"></div>
            <div class="dd"></div>
            <div class="dd"></div>
        </div>
    </div>

//css样式

  .banner {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 818px;
    margin-top: 0;
    background-color: antiquewhite;
}
.cont img {
    height: 100%;
}
.cont {
    width: 10000px;
    height: 818px;
    transition: all .5s;
}
.pre {
    position: absolute;
    top: 50%;
    left: 20px;
    color: rgb(121, 117, 117);
    font-family: 'iconfont';
    font-size: 60px;
    opacity: .5;
}
.next {
    position: absolute;
    top: 50%;
    right: 20px;
    color: rgb(121, 117, 117);
    font-family: 'iconfont';
    font-size: 60px;
    opacity: .5;
}
.pre:hover {
    cursor: pointer;
}
.next:hover {
    cursor: pointer;
}
.nods {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.dd {
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-color: rgb(10, 10, 10);
    opacity: .7;
    border-radius: 50%;
}
.changr-color {
    background-color: lightsalmon;
}

//js部分

let pre = $('.pre');
let next = $('.next');
let nods = $$('.dd');
let box = $('.cont');
for(let i=0;i<nods.length;i++){
    nods[i].setAttribute('index',i);
    nods[i].addEventListener('mouseover',function(){
        for(let j=0;j<nods.length;j++){
            nods[j].classList.remove('changr-color');
        }
        nods[i].classList.add('changr-color');
        let q = $('.changr-color');
        let h = q.getAttribute('index');
        console.log(h);
        box.style.transform = `translateX(${-h*1920}px)`;
    })
}
next.addEventListener('click',function(){
    let f = $('.changr-color');
    let k = f.getAttribute('index')-0;
    let w = k+1;
    // console.log(w);
    for(let i=0;i<nods.length;i++){
        nods[i].classList.remove('changr-color');
    }
    if(w==4){
        nods[0].classList.add('changr-color');
        box.style.transform = `translateX(${0*1920}px)`;
    }else{
        nods[k].nextElementSibling.classList.add('changr-color');
        let z = $('.changr-color');
        let c = z.getAttribute('index')-0;
        box.style.transform = `translateX(${-c*1920}px)`;
    }
})
pre.addEventListener('click',function(){
    let r = $('.changr-color');
    let x = r.getAttribute('index')-0;
    let s = x+1;
    for(let i=0;i<nods.length;i++){
        nods[i].classList.remove('changr-color');
    }
    if(s==1){
        nods[3].classList.add('changr-color');
        box.style.transform = `translateX(${-3*1920}px)`;
    }else{
        nods[x].previousElementSibling.classList.add('changr-color');
        let z = $('.changr-color');
        let c = z.getAttribute('index')-0;
        box.style.transform = `translateX(${-c*1920}px)`;
    }
})