Biblioteca JavaScript de proyección de diapositivas dinámica mínima
| Autor: | niloofarfs |
|---|---|
| Views Total: | 4,536 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 25, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una presentación de JavaScript mínima y pura que permite cargar dinámicamente tantas imágenes usando JavaScript.
Funcionamiento
Cargue el Font awesome 4 para los iconos Prev/Next.
<link rel="stylesheet" href="font-awesome.min.css">
Estructura HTML de marcado.
<body onload="sliderTimer()"> <div id="slider"> <div class="icon" id="left"><i class="fa fa-angle-left" onclick="prev()"></i></div> <h2 id="sliderHeader">First Heading</h2> <p id="sliderPara">First paragraph is awesome!</p> <div class="icon" id="right"><i class="fa fa-angle-right" onclick="next()"></i></div> </div> </body>
Cargue el archivo JavaScript principal en la parte inferior de la Página Web.
<script src="script.js"></script>
Defina las rutas y descripciones de la imagen en JavaScript de la siguiente manera:
var imgadr= ['1.jpg','2.jpg','3.jpg','4.jpg']; var headArray= ['First Heading','Second Heading', 'Third Heading', 'Last heading']; var paraArray= ['First paragraph is awesome!', 'Second paragraph goes here!', 'Third paragraph for you', 'Last but not least important paragraph!'];
