Hola,
ps en su
código, el script
lo hicieron ellos, nose
si aya algún problema en copiar.
Pero ps se puede hacer igual con
jQuery Código HTML:
<html>
<head>
<title>
</title>
</head>
<style>
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
img {
border:0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/cycle/jquery.cycle.all.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#img_').cycle({
prev:'#Anterior',
next:'#Siguiente',
speed:'fast',
timeout: 10000,
after:function(){
var alt = this .getAttribute("alt").split("||");
$("#titulo").text( alt[0] );
$("#texto").text( alt[1] );
}
});
$("#Anterior, #Pausa, #Siguiente").each(function(i){
var th = $(this);
if( this .id=="Pausa" ){
th.toggle(function(){
$('#img_').cycle('pause');
},function(){
$('#img_').cycle('resume');
});
}
th.hover(function(){
var over = this .getAttribute("alt");
var src = this .getAttribute("src");
this .src = over;
this .setAttribute("alt", src);
},function(){
var over = this .getAttribute("alt");
var src = this .getAttribute("src");
this .src = over;
this .setAttribute("alt", src);
}).before("<a href='#' onclick='return false;' id='g_"+ i +"'></a>");
$("#g_"+ i).prepend( th );
});
});
</script>
<body>
<br>
<div id="img_" class="pics">
<img src="http://malsup.com/jquery/cycle/images/beach1.jpg" width="200" height="200" alt=".:Beach1:. || aqui un texto 1" />
<img src="http://malsup.com/jquery/cycle/images/beach2.jpg" width="200" height="200" alt=".:Beach2:. || aqui un texto 2" />
<img src="http://malsup.com/jquery/cycle/images/beach3.jpg" width="200" height="200" alt=".:Beach3:. || aqui un texto 3" />
</div>
<br>
<div id="titulo">TITULO</div>
<div id="texto">ALGUN TEXTO</div>
<img src="http://www.lanacion.com.ar/imgs/layout/botones/slideAnterior.gif" id="Anterior" alt="http://www.lanacion.com.ar/imgs/layout/botones/slideAnterior_over.gif" />
<img src="http://www.lanacion.com.ar/imgs/layout/botones/slidePausa.gif" id="Pausa" alt="http://www.lanacion.com.ar/imgs/layout/botones/slidePausa_over.gif" />
<img src="http://www.lanacion.com.ar/imgs/layout/botones/slideSiguiente.gif" id="Siguiente" alt="http://www.lanacion.com.ar/imgs/layout/botones/slideSiguiente_over.gif" />
</body>
</html> bueno saludoS
:]