-
Cómo obtener Giro de imágenes en mi página web y colocarlos en cualquier lugar de la página
-
Imágenes que cambian de forma automática son intrínsecamente interesante de ver, lo que los hace ideales para mantener a los espectadores en su página web. ciclismo imagen requiere sólo unas pocas líneas de JavaScript. Un enfoque se basa en la declaración setInterval, que se ejecuta ninguna función que elija a intervalos periódicos. Para posicionar fácilmente sus imágenes en el lugar deseado en su página Web, especifique la ubicación de la parte superior y con propiedades CSS izquierda de coordenadas.
Instrucciones
1 Bloc de notas abierto y, a continuación, pegar las siguientes líneas de código HTML en el documento. Estas declaraciones definen una página web básica, en blanco, en el que se puede insertar declaraciones para la visualización de imágenes cíclicas:
<HTML>
<HEAD>
</ HEAD>
<BODY>
</ BODY>
</ HTML>2 Pegar las siguientes declaraciones después de la etiqueta <body> de HTML. Esta etiqueta define un marcador de posición para un archivo de imagen llamado "b1.jpg." A pesar de que es difícil codificado-esta declaración, JavaScript y CSS declaraciones pueden cambiar de posición y el contenido del marcador de posición:
<Img id = "someImage" src = "b1.jpg">
3 Pegar las siguientes sentencias de JavaScript justo por encima de la etiqueta <img>. Las declaraciones anteriores a la función changeImage crean variables de imagen para esa función, y luego usar setInterval para llamar a esa función a intervalos periódicos. La función utiliza la instrucción changeImage document.getElementById para insertar imágenes desde la matriz myimages en la etiqueta <img>:
<Script type = "javascript texto /" language = "javascript">
var idxImage = 0;
myimages var = new Array ( "b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg");
var i = setInterval (changeImage, 2500);changeImage función ()
{
idxImage ++;
si (== idxImage myImages.length)
idxImage = 0;
document.getElementById ( 'someImage') src = myimages [idxImage].;}
</ Script>4 Pegar las siguientes declaraciones CSS inmediatamente debajo de la etiqueta <HEAD>. Estas declaraciones indican la ubicación de la etiqueta de la página <img>, en unidades de píxeles. Esta ubicación puede estar en cualquier lugar que se especifique. Escriba lo largo de los 230 y 200 valores que se muestran aquí con diferentes valores - más o menos de cero a 800 para la propiedad superior, y de cero a 1000 para la propiedad izquierda. La resolución de la pantalla del PC u otro dispositivo que muestra la página Web establece el alcance real, y por lo tanto puede variar. Sin embargo, todos los dispositivos se mostrarán las imágenes en la esquina superior izquierda si escribe "0" tanto para las propiedades Top y Left:
<Style>
someImage
{
position: fixed;
top: 230px;
izquierda: 200px;
}
</ Style>5 Guarde el archivo con la extensión ".htm", y luego copiar cuatro imágenes numeradas correlativamente del "b1.jpg" a través de "b4.jpg" en la misma carpeta.
6 Abra la página Web en el explorador Web para ver las imágenes que cambian continuamente.
Consejos y advertencias
- Siempre tenga en mente para buscar imágenes que son de uso gratuito, o están bajo lo que se llama la licencia Creative Commons. De lo contrario, es posible que esté infringiendo los derechos de propiedad intelectual "." De alguien A pesar de que se hace comúnmente - la gente roba otras imágenes de la gente todo el tiempo - en realidad es un delito, por no hablar de una cosa mala muerte que hacer. No es más que suficiente material a cabo en ella se ofrece de forma gratuita.
- La información en este artículo se aplica a HTML 5. La misma puede variar ligeramente o significativamente con otras versiones.
