alguien sabe como hacer esta rotacion de imagenes

[MaLkAvIaN_NeT]

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.

[c0dex]

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

[Corneja]

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

[MaLkAvIaN_NeT]

hola muchas gracias por su pronta respuesta

voy a probarlo!

gracias

un saludo

[iwexcoder]

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