Hola Muchas Gracias!!!!
Buscando logre hacer este!!!
HTML
Código :
<div id="sitio">
<div id="header">
<div id="banner-ani">
<!-- Content holder will hold content -->
<div id="b-slider">
<div class="banners">
<h1>Div Demo 1</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</div>
<div class="banners">
<h1>Div Demo 2</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</div>
<div class="banners">
<h1>Div Demo 3</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</div>
<div class="banners">
<h1>Div Demo 4</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</div>
</div>
<!-- Navigation for content slider -->
<div class="contentnav" id="b-botonera">
<a rel="1" href="#">1</a> <a rel="2" href="#">2</a>
<a rel="3" href="#">3</a> <a rel="4" href="#">4</a></div>
</div>
</div>
</div>
CSS
Código :
#sitio {
width: 920px;
margin-left: auto;
margin-right: auto;
height: auto;
}
#sitio #header {
width: 920px;
height: auto;
}
#sitio #header #banner-ani {
border: 1px solid #a9a9a9;
height: 300px;
width: 920px;
overflow: hidden;
position: relative;
background-color: #FFF;
}
#sitio #header #banner-ani #b-slider {
position: absolute;
top: 0;
left: 0;
}
#sitio #header #banner-ani #b-slider .banners {
width: 920px;
float: left;
position: relative;
background-color: #FFF;
top: 0px;
left: 0px;
height: 300px;
}
#sitio #header #banner-ani #b-botonera {
position: absolute;
bottom: 36px;
left: 811px;
z-index: 100;
border: 1px solid #000;
background-color: #333333;
border: 1px solid #000;
font-family: arial, Helvetica, sans-serif;
color: 12;
width: 87px;
text-align: center;
height: 21px;
}
#sitio #header #banner-ani #b-botonera a {
padding: 3px 5px 3px 5px;
margin: 0px;
text-decoration: none;
color: #FFFFFF;
font-family: arial, Helvetica, sans-serif;
font-size: 12px;
}
#sitio #header #banner-ani #b-botonera a.active {
font-family: arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FF00FF;
text-align: center;
}
Javascript
Código :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="custom2.js" type="text/javascript"></script>
Custom2.js
Código :
$(document).ready(function() {
//Activate First Link
$("#b-botonera a:first").addClass("active");
//width of a single content area
var contentwidth = $("#b-slider").width();
//Total number of content
var totalcontent = $(".banners").size();
//Total width of all content area
var allcontentwidth = contentwidth * totalcontent;
//contentslider to new size which we got in above step
$("#b-slider").css({'width' : allcontentwidth});
//Now right a new function for slide and slide navigation
rotate = function(){
//Number of times we need to slide
var slideid = $active.attr("rel") - 1;
//Set the distance which single content needs to slide
var slidedistance = slideid * contentwidth;
//Remove active class
$("#b-botonera a").removeClass('active');
//Add Active Class
$active.addClass('active');
//Slider Animation
$("#b-slider").animate({
left: -slidedistance
}, 500 );
};
//Set Time for Rotation of slide
rotation = function(){
play = setInterval(function(){
//Next slide nav
$active = $('#b-botonera a.active').next();
if ( $active.length === 0) {
//Move to first slide nav
$active = $('#b-botonera a:first');
}
rotate();
//Timer speed 5 sec
}, 5000);
};
//Run rotation fuction
rotation();
$("#b-botonera a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});
Me gustaria saber si me pueden ayudar a que funcione igual, es animado automaticamente o manual pero lo que quiero es q funcione igual pero q la transicion sea Fade.
Escrito el 23 Nov 2011 05:28 pm
jejeje 
.