En esta publicación, crearemos un control deslizante elegante y más adelante le mostraremos cómo mostrar/ocultar los botones del control deslizante deslizante.
Para crear un control deslizante elegante, simplemente declare muchos elementos con el mismo nombre de clase.
Ejemplo:
<!DOCTYPE html> <html> <body> <div> <img class="mySlides" width="33%" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png" alt="" width="300" height="83" class="alignnone size-medium wp-image-2098786" /> <img class="mySlides" width="33%" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png" alt="" width="300" height="83" class="alignnone size-medium wp-image-2098787" /> <img class="mySlides" width="33%" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png" alt="" width="300" height="83" class="alignnone size-medium wp-image-2098786" /> </div> </body> </html>
Producción:
Ahora, solo agregue dos botones en las esquinas izquierda y derecha para deslizar las imágenes usando HTML y declare un método onClick para cambiar el
índice de la imagen mostrada usando JavaScript.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<div>
<img class="mySlides"
width="33%"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
alt=""
width="300"
height="83"
class="alignnone
size-medium wp-image-2098786" />
<img class="mySlides"
width="33%"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png"
alt=""
width="300"
height="83"
class="alignnone
size-medium wp-image-2098787" />
<img class="mySlides"
width="33%"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
alt=""
width="300"
height="83"
class="alignnone
size-medium wp-image-2098786" />
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs((slideIndex += n));
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
</script>
</body>
</html>
Producción:
Explicación del código JavaScript:
al cargar el script por primera vez, el índice de diapositivas se establecerá en 1 (primera imagen) y cuando el usuario haga clic en cualquiera de los botones,
el índice de diapositivas aumentará o disminuirá según esto. Y se mostrará la imagen. Mostrar = «ninguno» ocultará las imágenes y
mostrar = «bloquear» volverá a mostrar las imágenes.
Ocultar los botones:
para ocultar los botones, puede eliminar estas dos líneas:
" button onclick="plusDivs(-1)">❮ button" " button onclick="plusDivs(1)">❯ button"
Y en lugar de llamar al script usando onClick, use la función setTimeout(function_name, time_in_ms) para llamar automáticamente a la función
en el tiempo establecido.
Ejemplo:
<!DOCTYPE html>
<html>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.mySlides {
display: none;
}
</style>
<body>
<div>
<img class="mySlides"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
alt=""
width="300"
height="83"
class="alignnone
size-medium
wp-image-2098786" />
<img class="mySlides"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png"
alt=""
width="300"
height="83"
class="alignnone
size-medium
wp-image-2098787" />
<img class="mySlides"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
alt=""
width="300"
height="83"
class="alignnone
size-medium
wp-image-2098786" />
</div>
<script>
var slideIndex = 0;
showDivs();
function showDivs() {
var i;
var x = document.getElementsByClassName("mySlides");
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
setTimeout(showDivs, 2000);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por samrat2825 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA