imagenes al rededor del logo
Publicado por Poncho Garcia (1 intervención) el 09/08/2012 07:13:14
Saludos cordiales a todos los que forman este foro.
tengo un problema con este codigo. que ya no veo la salida.....
es un codigo que tiene un logo centrado fijo y 10 imagenes que giran alrededor de el, pero no logro hacerlo funcionar hojala y alguien me pueda ayudar, aqui pongo el codigo del archichivo.
Esta es mi primer asercamiento con javascript y realmente estoy sorprendido con lo qu ese puede llegar a hacer. Por favor ayudenme a que funcione este codigo.
Gracias...
atte: Poncho Garcia
tengo un problema con este codigo. que ya no veo la salida.....
es un codigo que tiene un logo centrado fijo y 10 imagenes que giran alrededor de el, pero no logro hacerlo funcionar hojala y alguien me pueda ayudar, aqui pongo el codigo del archichivo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
girando fotos alrededor del mundo
--------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Llaves con Chip Mexico</title>
<script language="javascript" type="text/javascript">
/************************************************** ******
Create a div with transparent place holder in your html
<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="404" height="202">
</div>
placeholder width:
4 sided: 1.42 * carousel image width + 3
6 sided: 2 * carousel image width +4
8 sided: 2.62 * carousel image width + 5
12 sided: 3.87 * carousel image width + 7
placeholder height:
carousel image height+2
Insert onload in body tag
<body onload="Carousel()">
************************************************** *******/// 7 variables to control behavior
var Car_Image_Width=103;var Car_Image_Height=48;var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=6;var Car_Direction=false; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12
/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/Car_Image_Sources=new Array(
"fotos/acura.gif","",
"fotos/alfa-romeo.gif","",
"fotos/bmw.gif","",
"fotos/buick.gif","",
"fotos/byd.gif","",
"fotos/chevrolet.gif","", //this slide isn't linked
"fotos/corvette.gif","",
"fotos/daewoo.gif","",
"fotos/dodge.gif","",
"fotos/ferrari.gif","",
"fotos/ford.gif","",
"fotos/jeep.gif","",
"fotos/pontiac.gif","",
"fotos/suzuki.gif","",
"fotos/mercedes.gif","",
"fotos/chrysler.gif","",
"fotos/mazda.gif","",
"fotos/toyota.gif","" // NOTE No comma after last line
);/***************** DO NOT EDIT BELOW **********************************/CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car _NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSide s/2;
function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild (CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}
function CarImages(){
if(!C_Stppd){
C_TotalW=0;for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C _Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",40)}
function C_LdLnk(){if(this.lnk)window.location.href=this.ln k}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"defa ult";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
</head>
<body onload="Carousel()">
<form id="form1" runat="server">
<div center>
<div center id="grande" style="z-index: 101; left: 139px; width: 620px;
top: 7px; height: 65px; vertical-align: middle; text-align: justify; position: relative;">
<asp:Image ID="Image1" runat="server" Height="343px" ImageUrl="~/image/mundotransparente.gif"
Width="382px" />
<div id="Carousel" style="z-index: 101; left: 0px; width: 419px;
top: -220px; height: 65px; vertical-align: middle; text-align: justify; position: relative;">
</div>
</div>
</DIV>
<asp:DropDownList ID="DropDownList1" runat="server" Width="110px">
</asp:DropDownList>
</form>
</body>
</html>
Esta es mi primer asercamiento con javascript y realmente estoy sorprendido con lo qu ese puede llegar a hacer. Por favor ayudenme a que funcione este codigo.
Gracias...
atte: Poncho Garcia
Valora esta pregunta
0