Foros del Web » Programando para Internet » Javascript »

carousel 3D

Estas en el tema de carousel 3D en el foro de Javascript en Foros del Web. Hola a tod@s. Estoy intentado hacer un carousel que me sirva de menú, pero no sé como cambiar el estilo del titulo de las imagenes. ...
  #1 (permalink)  
Antiguo 26/03/2010, 11:03
 
Fecha de Ingreso: marzo-2010
Ubicación: Córdoba, España
Mensajes: 6
Antigüedad: 14 años, 1 mes
Puntos: 0
carousel 3D

Hola a tod@s.
Estoy intentado hacer un carousel que me sirva de menú, pero no sé como cambiar el estilo del titulo de las imagenes.
aqui les pongo el código que viene en http://www.dynamicdrive.com.

<script type='text/javascript'>
function carousel(params){
if(!(params.width>0&&isFinite(params.width)))param s.width=100;
if(!(params.height>0&&isFinite(params.height)))par ams.height=100;
if(!(params.sides>2&&isFinite(params.sides)))param s.sides=4;
if(!(params.steps>0&&params.steps<100&&isFinite(pa rams.steps)))params.steps=20;
if(!(params.speed>0&&isFinite(params.speed)))param s.speed=8;
if(!(params.image_border_width>=0&&isFinite(params .image_border_width)))params.image_border_width=0;
if(isFinite(params.id)||!params.id)params.id='bad_ id_given_'+Math.random();


CREO QUE AQUI ES DONDE DEBO HACER LAS MODIFICACIONES PERO NO SE CÓMO

document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[\r\n\t ]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/g,'_'))
cdiv.style.width=params.width+'px';
cdiv.style.height=params.height+'px';
cdiv.style.border=params.border;
cdiv.style.position='relative';
cdiv.style.overflow='hidden';
cdiv.title=params.id;

var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
interval=isNaN(interval)?200:interval;
var img_position=[],images=[],img_dimension=[];
var img_index=params.images.length+1,img_index_cap=2*p arams.images.length;
var faces=Math.ceil(params.sides/2), dimension, direction;

function init(){
if(params.direction=="left" || params.direction=="right"){
direction=params.direction;
dimension="width";
}
else if(params.direction=="top" || params.direction=="bottom"){
direction=params.direction;
dimension="height";
}
else {
direction="left";
dimension="width";
}
cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
var img=new Image();
img.style.position='absolute';
img.style[direction]='10000px';
img.style.width=params.width-2*params.image_border_width+'px';
img.style.height=params.height-2*params.image_border_width+'px';
img.style.border=(params.image_border_width||0)+'p x solid '+params.image_border_color;

for(var i=0;i<params.images.length;i++){
images[i]=img.cloneNode(true);
images[i].src=params.images[i];
if(params.links&&params.links[i]&&params.links[i]!=''){
images[i].onclick=new Function("window.location='"+params.links[i]+"'");
images[i].style.cursor=document.all?'hand':'pointer';
}
if(params.titles&&params.titles[i]&&params.titles[i]!='')
images[i].title=params.titles[i];
images[i+params.images.length]=images[i];
if(params.images.length==faces)
images[i+2*params.images.length]=images[i];
cdiv.appendChild(images[i]);
}

var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
var pi_piece=2*Math.PI/params.steps/params.sides;
for(i=0;i<=params.steps*faces;i++){
img_dimension[i]=face_size*Math.sin(pi_piece*i);
img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':'10000px';
img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimens ion[i])-2*params.image_border_width+'px':'1px';
}
}
init();

cdiv.rotate = function(){
setTimeout('document.getElementById("'+cdiv.id+'") .rotate()',interval);
if(!spinning) return;
if(++counter>=params.steps){
counter=0;
if(++img_index>=img_index_cap)
img_index=params.images.length;
}
images[img_index-faces].style[direction]='20000px';
for(var i=faces-1;i>=0;i--){
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
}
}
cdiv.onmouseover=function(){
spinning=false;
}
cdiv.onmouseout=function(){
spinning=true;
}
setTimeout('document.getElementById("'+cdiv.id+'") .rotate()',200);
}
</script>
</head>

<body>

<script>
var no = 3; // snow number
var speed = 10; // smaller number moves the snow faster
var snowflake = "imagenes/margaritablanca.png";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 400, doc_height = 500;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = 500;
doc_height = 500;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
</script>


<img class="border" src="imagenes/logoelpaseo1.jpg">


<div id=carousel>
<img src="imagenes/menu1.png" align="left">
<script type='text/javascript'>
carousel({id:'',
border:'',
size_mode:'image',
width:200,
height:270,
sides:6,
steps:23,
speed:5,
direction:'left',
images:['imagenes/coronaPe.jpg',
'imagenes/orquideasPe.jpg',
'imagenes/contactoPe.jpg',
'imagenes/corazonPe.jpg',
'imagenes/ramoPe.jpg'],
links: ['http://www.floristeriaelpaseo.arredemo.org/funerarios.html',
'http://www.nelysoca.arredemo.org/enlaces-autonomicos.html',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],

ESTOS SON LOS TITULO QUE QUISIERA PODER CAMBIAR SU ESTILO

titles:['Arreglos funerarios', 'Nuestros Productos', 'Contacto', 'Ocaciones Especiales','Bodas y Novias'],
image_border_width:0,
image_border_color:'blue'
});
</script>

Muchas gracias!!!

Etiquetas: carrousel
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:32.