Buscamos por todo el mundo online y de este modo traerte la respuesta para tu duda, si tienes dudas puedes dejar la pregunta y contestamos porque estamos para ayudarte.
Ejemplo: presentación automática de diapositivas en html
DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>*box-sizing: border-box;bodyfont-family: Verdana, sans-serif;.mySlidesdisplay: none;imgvertical-align: middle;/* Slideshow container */.slideshow-containermax-width:1000px;position: relative;margin: auto;/* Caption text */.textcolor:#f2f2f2;font-size:15px;padding:8px12px;position: absolute;bottom:8px;width:100%;text-align: center;/* Number text (1/3 etc) */.numbertextcolor:#f2f2f2;font-size:12px;padding:8px12px;position: absolute;top:0;/* The dots/bullets/indicators */.dotheight:15px;width:15px;margin:02px;background-color:#bbb;border-radius:50%;display: inline-block;transition: background-color 0.6s ease;.activebackground-color:#717171;/* Fading animation */.fade-webkit-animation-name: fade;-webkit-animation-duration:1.5s;animation-name: fade;animation-duration:1.5s;@-webkit-keyframes fadefromopacity:.4toopacity:1@keyframes fadefromopacity:.4toopacity:1/* On smaller screens, decrease text size */@mediaonly screen and(max-width:300px).textfont-size:11pxstyle>head><body><h2>Automatic Slideshowh2><p>Change image every 2 seconds:p><divclass="slideshow-container"><divclass="mySlides fade"><divclass="numbertext">1 / 3div><imgsrc="img_nature_wide.jpg"style="width:100%"><divclass="text">Caption Textdiv>div><divclass="mySlides fade"><divclass="numbertext">2 / 3div><imgsrc="img_snow_wide.jpg"style="width:100%"><divclass="text">Caption Twodiv>div><divclass="mySlides fade"><divclass="numbertext">3 / 3div><imgsrc="img_mountains_wide.jpg"style="width:100%"><divclass="text">Caption Threediv>div>div><br><divstyle="text-align:center"><spanclass="dot">span><spanclass="dot">span><spanclass="dot">span>div><script>var slideIndex =0;showSlides();functionshowSlides()var i;var slides =document.getElementsByClassName("mySlides");var dots =document.getElementsByClassName("dot");for(i =0; i < slides.length; i++)
slides[i].style.display="none";
slideIndex++;if(slideIndex > slides.length)slideIndex =1for(i =0; i < dots.length; i++)
dots[i].className= dots[i].className.replace(" active","");
slides[slideIndex-1].style.display="block";
dots[slideIndex-1].className+=" active";setTimeout(showSlides,2000);// Change image every 2 secondsscript>body>html>Tienes la opción de ayudar nuestro trabajo exponiendo un comentario o puntuándolo te damos la bienvenida.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)