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 claseactiveal 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 alindexenviado.- Al mismo tiempo, se utiliza
classList.togglepara añadir la claseactiveal 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?