Animación en 3D con Javascrip

Creado a las // comentar

Aqui el codigo HTML


En un archivo html colocan el codigo y lo guardan con el nombre que gusten.


xmlns="http://www.w3.org/1999/xhtml">
http-equiv="Content-Type" content="text/html; charset=utf-8" />
</span>sh<span class="webkit-html-tag">
onLoad="alternar_sh()">
class="border01">
src="#" name="sh" width="250" height="150" border="0" />

El codigo en Javascript


Creamos un archivo llamado sh_script.js y ahi colocan el siguiente codigo
// JavaScript Document
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(250,150)
array_imagen[0].src = "images/sh/sh_01.png"
array_imagen[1] = new Image(250,150)
array_imagen[1].src = "images/sh/sh_02.png"
array_imagen[2] = new Image(250,150)
array_imagen[2].src = "images/sh/sh_03.png"
array_imagen[3] = new Image(250,150)
array_imagen[3].src = "images/sh/sh_04.png"
array_imagen[4] = new Image(250,150)
array_imagen[4].src = "images/sh/sh_05.png"
array_imagen[5] = new Image(250,150)
array_imagen[5].src = "images/sh/sh_06.png"
array_imagen[6] = new Image(250,150)
array_imagen[6].src = "images/sh/sh_07.png"
array_imagen[7] = new Image(250,150)
array_imagen[7].src = "images/sh/sh_08.png"
array_imagen[8] = new Image(250,150)
array_imagen[8].src = "images/sh/sh_09.png"
array_imagen[9] = new Image(250,150)
array_imagen[9].src = "images/sh/sh_010.png"
array_imagen[10] = new Image(250,150)
array_imagen[10].src = "images/sh/sh_011.png"
array_imagen[11] = new Image(250,150)
array_imagen[11].src = "images/sh/sh_012.png"
array_imagen[12] = new Image(250,150)
array_imagen[12].src = "images/sh/sh_013.png"
array_imagen[13] = new Image(250,150)
array_imagen[13].src = "images/sh/sh_014.png"
array_imagen[14] = new Image(250,150)
array_imagen[14].src = "images/sh/sh_015.png"
array_imagen[15] = new Image(250,150)
array_imagen[15].src = "images/sh/sh_016.png"
array_imagen[16] = new Image(250,150)
array_imagen[16].src = "images/sh/sh_017.png"
array_imagen[17] = new Image(250,150)
array_imagen[17].src = "images/sh/sh_018.png"
array_imagen[18] = new Image(250,150)
array_imagen[18].src = "images/sh/sh_019.png"
array_imagen[19] = new Image(250,150)
array_imagen[19].src = "images/sh/sh_020.png"
array_imagen[20] = new Image(250,150)
array_imagen[20].src = "images/sh/sh_021.png"
array_imagen[21] = new Image(250,150)
array_imagen[21].src = "images/sh/sh_022.png"
array_imagen[22] = new Image(250,150)
array_imagen[22].src = "images/sh/sh_023.png"
array_imagen[23] = new Image(250,150)
array_imagen[23].src = "images/sh/sh_024.png"
array_imagen[24] = new Image(250,150)
array_imagen[24].src = "images/sh/sh_025.png"
array_imagen[25] = new Image(250,150)
array_imagen[25].src = "images/sh/sh_026.png"
array_imagen[26] = new Image(250,150)
array_imagen[26].src = "images/sh/sh_027.png"
array_imagen[27] = new Image(250,150)
array_imagen[27].src = "images/sh/sh_028.png"
array_imagen[28] = new Image(250,150)
array_imagen[28].src = "images/sh/sh_029.png"
array_imagen[29] = new Image(250,150)
array_imagen[29].src = "images/sh/sh_030.png"
array_imagen[30] = new Image(250,150)
array_imagen[30].src = "images/sh/sh_031.png"
array_imagen[31] = new Image(250,150)
array_imagen[31].src = "images/sh/sh_032.png"
array_imagen[32] = new Image(250,150)
array_imagen[32].src = "images/sh/sh_033.png"
array_imagen[33] = new Image(250,150)
array_imagen[33].src = "images/sh/sh_034.png"
array_imagen[34] = new Image(250,150)
array_imagen[34].src = "images/sh/sh_035.png"
array_imagen[35] = new Image(250,150)
array_imagen[35].src = "images/sh/sh_036.png"
array_imagen[36] = new Image(250,150)
array_imagen[36].src = "images/sh/sh_037.png"
array_imagen[37] = new Image(250,150)
array_imagen[37].src = "images/sh/sh_038.png"
array_imagen[38] = new Image(250,150)
array_imagen[38].src = "images/sh/sh_039.png"
array_imagen[39] = new Image(250,150)
array_imagen[39].src = "images/sh/sh_040.png"
array_imagen[40] = new Image(250,150)
array_imagen[40].src = "images/sh/sh_041.png"
array_imagen[41] = new Image(250,150)
array_imagen[41].src = "images/sh/sh_042.png"
array_imagen[42] = new Image(250,150)
array_imagen[42].src = "images/sh/sh_043.png"
array_imagen[43] = new Image(250,150)
array_imagen[43].src = "images/sh/sh_044.png"
array_imagen[44] = new Image(250,150)
array_imagen[44].src = "images/sh/sh_045.png"
array_imagen[45] = new Image(250,150)
array_imagen[45].src = "images/sh/sh_046.png"
array_imagen[46] = new Image(250,150)
array_imagen[46].src = "images/sh/sh_047.png"
array_imagen[47] = new Image(250,150)
array_imagen[47].src = "images/sh/sh_048.png"
array_imagen[48] = new Image(250,150)
array_imagen[48].src = "images/sh/sh_049.png"
array_imagen[49] = new Image(250,150)
array_imagen[49].src = "images/sh/sh_050.png"

//variable para llevar la cuenta de la imagen siguiente
contador = 0
//función para rotar el banner
function alternar_sh(){
    window.document["sh"].src = array_imagen[contador].src
    contador ++
    contador = contador % array_imagen.length
    setTimeout("alternar_sh()",50)
}
Para este ejemplo se requieren una secuencia de imagenes creadas previamente aqui les dejo el ejemplo de este tutorial.

0 comentarios: