B
blankito1998
Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
<a '.$loared.' class="loadpost cora">¡Entendido! El código actual ya permite que el botón cambie de color automáticamente al mostrar la imagen correspondiente. Cada vez que se muestra una nueva imagen, se aplica la claseactive
al botón asociado a esa imagen.
### Aquí te dejo un resumen más claro:
1. CSS: Define cómo se verá el botón activo.
Insertar CODE, HTML o PHP:css .active { background-color: #007bff; /* Cambia a este color cuando el botón está activo */ color: white; /* Cambia el color del texto */ }
2. JavaScript: Asegúrate de que la funciónshowImage(index)
maneje correctamente la adición y eliminación de la claseactive
:
Insertar CODE, HTML o PHP:javascript // Variables let currentIndex = 0; const images = document.querySelectorAll('.loadpost'); // Seleccionar todas las imágenes const buttons = document.querySelectorAll('.floopbuton'); // Seleccionar todos los botones const totalImages = images.length; let interval; // Guardian del intervalo // Función para mostrar la imagen según el índice function showImage(index) { images.forEach((img, i) => { img.style.display = (i === index) ? 'block' : 'none'; // Solo muestra la imagen seleccionada }); buttons.forEach((btn, i) => { btn.classList.toggle('active', i === index); // Cambia la clase activa con el botón correspondiente }); } // Cambiar a la siguiente imagen function showNextImage() { currentIndex = (currentIndex + 1) % totalImages; // Ciclar el índice showImage(currentIndex); } // Iniciar el intervalo automático function startInterval() { interval = setInterval(showNextImage, 5000); // Cambia imagen cada 5 segundos } // Manejo de clic en botones buttons.forEach((button, index) => { button.addEventListener('click', (e) => { e.preventDefault(); // Prevenir el comportamiento predeterminado del enlace clearInterval(interval); // Detener el intervalo automático currentIndex = index; // Actualizar el índice actual showImage(currentIndex); // Mostrar la imagen correspondiente startInterval(); // Reiniciar el intervalo }); }); // Inicializa el carrusel showImage(currentIndex); // Muestra la primera imagen startInterval(); // Comienza el intervalo automático
### ¿Cómo Funciona?
- La función
showImage(index)
oculta todas las imágenes y muestra solo la que corresponde alindex
enviado.- Al mismo tiempo, se utiliza
classList.toggle
para añadir la claseactive
al botón correspondiente a la imagen que se está mostrando. Esto cambia automáticamente el estilo del botón.
### Revisión
Asegúrate de que el HTML y las imágenes estén configurados correctamente y que tengas los estilos CSS aplicados. A cada cambio de imagen, el botón correspondiente debería automáticamente cambiar su color.
Si tienes más preguntas o necesitas ajustes, ¡no dudes en pedirlo!
<img src="'.$fila['photobar'].'" class="cora" />
<span class="debps">aqui iran los mas vistos</span>
<span>fecha</span>
</a>
<a '.$loared.' class="loadpost cora" style="display: none;">
<img src="'.$fila['photobar'].'" class="cora" />
<b class="debps">aqui iran los mas vistos</b>
<span>fecha</span>
</a>
porque cuando pasa no se cambia el span?