Cómo implementar la presentación de diapositivas js

1. Ubicación de las imágenes: debe colocar todas las imágenes en un div (llamémoslo aquí imágenes de clase) y luego colocar las imágenes en un div más grande (llamémoslo contenedor), luego configurarlo. el ancho del contenedor al ancho de una imagen, y luego establezca overflow: oculto en él. Luego establezca el ancho de las imágenes al ancho total de todas las imágenes. Esto hace que sea más fácil cambiar de izquierda a derecha más adelante. Como se muestra en la siguiente imagen:

2. El punto básico es que cuando se hace clic en el botón Siguiente, el atributo izquierdo del contenedor de imágenes se define en la posición de la siguiente imagen, para pasar a la siguiente imagen. Por ejemplo, suponiendo que la imagen actual es la segunda imagen. , luego, cuando se hace clic en el botón, establezca el valor izquierdo de las imágenes en -640*2 'px' (porque las imágenes que uso aquí son todas -640 px) (por supuesto, se debe agregar un contador aquí. Cuando se hace clic en la última imagen , el contador se pone a 0).

Si no planeas agregar una animación en movimiento suave, puedes finalizarla aquí. Pero si planea agregar animación, hay un problema: al pasar a la última imagen, si continúa haciendo clic, el grupo de imágenes retrocederá desde la última imagen a la primera, lo que provocará una muy mala experiencia de usuario. Idealmente, cuando se desplaza a la última página y continúa desplazándose, debería ser tan fluido como desplazarse a la página siguiente. No sé qué dije claramente, pero es más o menos así: al igual que la pantalla de un teléfono móvil, cuando te deslizas a la última pantalla y continúas deslizándote, se deslizará directamente hacia la siguiente pantalla, que es una diapositiva circular. .

El principio básico es que debe agregar una imagen de búfer (src es la misma que la primera imagen) al final del grupo de imágenes normal. Cuando la diapositiva esté en la última imagen, haga clic en la diapositiva. y deslícese suavemente hasta esta imagen almacenada en el búfer. Cuando el usuario haga clic la próxima vez, la imagen se reemplazará silenciosamente a la primera imagen real y luego se ejecutará la animación. Dado que el reemplazo a la primera imagen se realiza inmediatamente, el usuario no notará que la imagen ha regresado a la primera imagen real, logrando así un deslizamiento circular.