implementación simple figura carrusel

Antes de escribir las manos, primero en analizar

Se puede ver que hay dos formas principales de realizar cifra carrusel, uno es para cambiar la imagen con el botón izquierdo, uno ha de ser conmutado por los botones de la derecha. Aquí tenemos que analizar la imagen cambiando el botón derecho.

1. Los botones de la derecha
   Primero definimos un índice de variables, cuando se hace clic en el botón para el momento adecuado, el índice de necesidad de añadir 1. Sin embargo, el índice no puede ser ilimitado para aumentar, de otro modo, cuando nuestro índice es superior a la carta carrusel que poner el número de la imagen cuando no se cambiará, y se atascan en la última imagen de arriba. Por lo tanto, tenemos entonces que determinar lo que el índice no es mayor que el número máximo, cuando es mayor que el número máximo de la figura carrusel, y su valor es re-establece en 0, por lo que se puede lograr un ciclo de conmutación.

function bun(){
                index++;
                if(index>pic.length){
                    index=0;
                }

A continuación, se hace fácil para ellos, y cuando el índice + 1, ponemos la imagen correspondiente está representada a través de la exhibición en ella, al que corresponde, queremos transmitir en una visualización de la imagen: ninguno de ocultar. Eso es todo

pic[index].classList.add("show");
pic[index-1<0?4:index-1].classList.remove("show");

Por encima de la realización básica del clic de un botón para cambiar la función de la misma manera, el botón derecho y el botón izquierdo es el mismo, pero cambiarlo parámetros en él.

oLeft.onclick = function(){
            index--;
            if(index<pic.length){
                index=4;
            }
            pic[index].classList.add("show");
            pic[index+1>4?0:index-1].classList.remove("show");         
        }

Se recorrer automáticamente las imágenes, sólo tenemos que añadir un contador de tiempo sobre ella.

let swiper = setInterval(bun,3000);

Aquí está el código completo:

 let oLeft = document.querySelector(".left"),
            oRight = document.querySelector(".right"),
            pic = document.querySelectorAll(".b-img ul li"),
            txt = document.querySelectorAll(".b-tab ul li"),
            index=0;
        

            function bun(){
                index++;
                if(index>pic.Length){
                    index=0;
                }
                pic[index].classList.add("show");
                pic[index-1<0?4:index-1].classList.remove("show");
            }
        
        oRight.onclick=bun;

        oLeft.onclick = function(){
            index--;
            if(index<pic.Lenght){
                index=4;
            }
            pic[index].classList.add("show");
            pic[index+1>4?0:index-1].classList.remove("show");
        }

       let swiper = setInterval(bun,3000);

bien, ya está! Sahua (Efectos a continuación)