Este grupo especializado pasados varios días de trabajo y recopilar de datos, obtuvieron la solución, nuestro deseo es que te sea útil en tu trabajo.
Ejemplo: presentación automática de diapositivas en html
<!--automatic slidshow--><!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>*box-sizing: border-box;
body font-family:Verdana, sans-serif;.mySlidesdisplay: none;
img vertical-align: middle;/* Slideshow container */.slideshow-container
max-width:1000px;
position: relative;
margin: auto;/* Caption text */.text
color: #f2f2f2;
font-size:15px;
padding:8px 12px;
position: absolute;
bottom:8px;
width:100%;
text-align: center;/* Number text (1/3 etc) */.numbertext
color: #f2f2f2;
font-size:12px;
padding:8px 12px;
position: absolute;
top:0;/* The dots/bullets/indicators */.dot
height:15px;
width:15px;
margin:02px;
background-color: #bbb;
border-radius:50%;
display: inline-block;
transition: background-color 0.6s ease;.active
background-color: #717171;/* Fading animation */.fade-webkit-animation-name: fade;-webkit-animation-duration:1.5s;
animation-name: fade;
animation-duration:1.5s;
@-webkit-keyframes fade fromopacity:.4
to opacity:1
@keyframes fade fromopacity:.4
to opacity:1/* On smaller screens, decrease text size */
@media only screen and(max-width:300px).textfont-size:11px</style></head><body><h2>AutomaticSlideshow</h2><p>Change image every 2 seconds:</p><div class="slideshow-container"><div class="mySlides fade"><div class="numbertext">1/3</div><img src="img_nature_wide.jpg" style="width:100%"><div class="text">CaptionText</div></div><div class="mySlides fade"><div class="numbertext">2/3</div><img src="img_snow_wide.jpg" style="width:100%"><div class="text">CaptionTwo</div></div><div class="mySlides fade"><div class="numbertext">3/3</div><img src="img_mountains_wide.jpg" style="width:100%"><div class="text">CaptionThree</div></div></div><br><div style="text-align:center"><span class="dot"></span><span class="dot"></span><span class="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 seconds</script></body></html>Comentarios y valoraciones del artículo
Recuerda que puedes valorar este ensayo si diste con la solución.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)