Foros del Web » Creando para Internet » HTML »

alguien sabe como hacer esta rotacion de imagenes

Estas en el tema de alguien sabe como hacer esta rotacion de imagenes en el foro de HTML en Foros del Web. Hola quisiera saber como podria hacer esta rotacion de imagenes o carrusel yo se que también se podría hacer con flash pero me parece mas ...
  #1 (permalink)  
Antiguo 31/05/2009, 00:14
Avatar de MaLkAvIaN_NeT  
Fecha de Ingreso: marzo-2005
Ubicación: trujillo
Mensajes: 141
Antigüedad: 12 años, 8 meses
Puntos: 0
alguien sabe como hacer esta rotacion de imagenes

Hola quisiera saber como podria hacer esta rotacion de imagenes o carrusel yo se que también se podría hacer con flash pero me parece mas liviano usar el java script y los css.

http://www.unab.cl/

baje el código de la web y es totalmente prolijo y enredado, no se si lo genera algun software, quisiera porfavor que me ayuden.

gracias por su atención.
__________________
www.emdersoft.com
  #2 (permalink)  
Antiguo 31/05/2009, 00:45
 
Fecha de Ingreso: mayo-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 2
Respuesta: alguien sabe como hacer esta rotacion de imagenes

hay unos widgets en javascript llamado meteora y tiene uno que hace mas o menos ese efecto carousel aca te lo dejo.

meteora.astrata.com.mx/pages/documentation/meteora-carousel
  #3 (permalink)  
Antiguo 31/05/2009, 03:35
Avatar de Corneja  
Fecha de Ingreso: febrero-2008
Ubicación: Senolaf
Mensajes: 268
Antigüedad: 9 años, 9 meses
Puntos: 8
Respuesta: alguien sabe como hacer esta rotacion de imagenes

Te adjunto el código, no es mío, sino de Brent Gustafson (vitaflo.com y assembler.org) pero como no he conseguido encontrar un link con el que lo puedas ver te lo copio y pego aquí....

Código:
// ASM SCROLLER 2.0 - (c) 2000 Brent Gustafson, vitaflo.com and assembler.org
//
// Feel free to hack around with this code for personal use, it's open source
// so do what ya want w/ it.  Though a link would be nice. ;)  While this code
// doesn'tWidth have a ton of documentation, please remember that I am a busy man,
// so support of this code will be very minimal.  Use at your own risk.
//
// Follow me into a solo, get in the FLO
// And you can picture like a photo
// Music mixed mellow maintains to make 
// Melodies for MC's motivates the breaks 
// I'm everlasting, I can go on for days and days 
// With rhyme displays that engrave deep as X-rays
//
// -Brent ([email protected])
// assembler.org || vitaflo.com

var w3c = (document.getElementById) ? 1:0
var ns4 = (document.layers) ? 1:0
var ie4 = (document.all) ? 1:0

var range = "";
var cap = "";
var mutex = 0;
var yplace = 0;
var ymax = 0;
var ymin = 0;
var xplace = 10;
var newsWidth = 0;

/** The only code you should ever need to change here are the following 3 vars **/
var speed = 6;                         //speed at which the news scrolls
var newsId = "news";                   //name of the overall news div
var newsClipId = "newsClipping";       //name of the news clipping div

function redrawScreen() {
  location.reload();
  return false
}

function shiftTo(obj, x, y) {
  if (w3c) {
    obj.style.top = x + "px";
    obj.style.left = y + "px";
  }
  else if (ns4) {
	 obj.moveTo(y,x);
  } 
  else if (ie4) {
    obj.style.pixelTop = x;
	obj.style.pixelLeft = y;
  }
}

function getObject(obj) {
	var theObj = eval("document." + range + obj + cap);
	return theObj;
} 

function scrollUp() {
  if (mutex == 1){
    var theObj = getObject(newsId);
    if (yplace < ymax) {
      yplace = yplace + speed;
      if (yplace > ymax) yplace = ymax;
      shiftTo(theObj, xplace, yplace);
      setTimeout("scrollUp()",25);
    }
  }
}
  
function scrollDown() {
  if (mutex == 2){
    var theObj = getObject(newsId);
    if (yplace > ymin) {
      yplace = yplace - speed;
      if (yplace < ymin) yplace = ymin;
      shiftTo(theObj, xplace, yplace);
      setTimeout("scrollDown()",25);
    }
  }
}

function scrollIt(msg, dir) {
  window.status = msg; 
  mutex = dir;
  if (mutex == 1) scrollUp();
  else if (mutex == 2) scrollDown();
}

function init() {
  if (w3c) {
    range = "getElementById(\"";
    cap = "\")";
    theObj = getObject(newsClipId);
    newsWidth = parseInt(theObj.offsetWidth);
    theObj = getObject(newsId);
    ymin = (parseInt(theObj.offsetWidth) - newsWidth) * -1;
  }
  else if (ns4) {
    window.captureEvents(Event.RESIZE);
    window.onresize = redrawScreen;
    theObj = getObject(newsClipId);
    newsWidth = theObj.clip.width;
    newsId = newsClipId + ".document." + newsId;
    theObj = getObject(newsId);
    ymin = (theObj.clip.width - newsWidth) * -1;
  }
  else if (ie4) {
    range = "all.";
    theObj = getObject(newsClipId);
    newsWidth = theObj.offsetWidth;
    theObj = getObject(newsId);
    ymin = (theObj.offsetWidth - newsWidthWidth) * -1;
  }
}

// END OF LINE
luego en el HTML tienes que crear algo así

Código:
Código HTML:
<DIV id=scrollMeDown style="Z-INDEX: 3; LEFT: 21px; WIDTH: 13px; POSITION: absolute; TOP: 31px; HEIGHT: 16px; visibility: visible">
	<A onmouseover="scrollIt('Scroll Izquierda',2); return true" onfocus=this.blur(); onmouseout="scrollIt('',0); return true" href="#">
	<img height=17 src="../imagenes/flecha-izq.gif" width=32 border=0 name="Image2"></A> 
</DIV>
<div id=scrollMeUp style="Z-INDEX: 4; LEFT: 21px; WIDTH: 13px; POSITION: absolute; TOP: 51px; HEIGHT: 16px; visibility: visible">
	<a onMouseOver="scrollIt('Scroll Derecha',1); return true" onFocus=this.blur(); onMouseOut="scrollIt('',0); return true" href="#">
	<IMG height=17 src="../imagenes/flecha-der.gif" width=32 border=0 name="Image1"></a>
</div>
<DIV id=newsClipping style="Z-INDEX: 2; LEFT: 55px; WIDTH: 650px; CLIP: rect(0px 650px 48px 0px); POSITION: absolute; TOP: 23px; HEIGHT: 48px; visibility: visible"> 
  <DIV id=news style="Z-INDEX: 1; LEFT: 0px; WIDTH: 884px; POSITION: absolute; TOP: 10px; HEIGHT: 40px"> 
    <!-- Aquí es donde van las imágenes que quieres que rulen -->
  </DIV>
</DIV> 
espero que te sirva
  #4 (permalink)  
Antiguo 31/05/2009, 08:42
Avatar de MaLkAvIaN_NeT  
Fecha de Ingreso: marzo-2005
Ubicación: trujillo
Mensajes: 141
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: alguien sabe como hacer esta rotacion de imagenes

hola muchas gracias por su pronta respuesta

voy a probarlo!

gracias

un saludo
__________________
www.emdersoft.com
  #5 (permalink)  
Antiguo 01/06/2009, 06:31
Avatar de iwexcoder  
Fecha de Ingreso: mayo-2009
Ubicación: San Carlos de Bariloche
Mensajes: 404
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: alguien sabe como hacer esta rotacion de imagenes

buenas, tambien puedes hacerlo con Flash y darle efecto de slide mucho mas atractivo. Para que no pese mucho el swf, deberias cargar las imagenes de forma externa con XML y programar el actionscript en el movie principal, de esta forma, el flash seria muy liviano, y ademas tienes la ventaja de poder animar mucho mejor las imagenes y poder agregar todas las que quieras
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 18:27.