Hoy vamos a utilizar las rotaciones de jQuery y CSS3, junto con el complemento de rotación de jQuery, para crear una hermosa presentación de diapositivas. Puede usarlo para darle vida a sus sitios web, páginas de productos y otros proyectos con un poco de magia CSS3.
HTML
Siguiendo la tradición, primero estableceremos el marcado HTML de la presentación de diapositivas. El elemento contenedor principal es el #slideShowContainer div, que contiene el #slideShow div y los enlaces anterior/siguiente (convertidos en flechas con CSS).
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Slideshow With jQuery and CSS3 | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
<li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
<li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
<li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
</ul>
</div>
<a id="previousLink" href="#">»</a>
<a id="nextLink" href="#">«</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery.rotate.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Las diapositivas se definen como elementos LI dentro de una lista desordenada. Tenga en cuenta que el ancho de las imágenes se establece en 100%. De esta manera, se escalarán de acuerdo con el ancho de la #slideShow div.
En la parte inferior, incluimos la biblioteca jQuery, nuestro propio script.js archivo y el complemento de rotación de jQuery. Estamos usando el complemento, por lo que podemos trabajar con rotaciones de CSS3 en un estilo de navegador cruzado, como verá en el último paso de este tutorial.
CSS
Este diseño se basa en gran medida en el posicionamiento relativo y absoluto. Puede ver el estilo de la presentación de diapositivas a continuación.
estilos.css
#slideShowContainer{
width:510px;
height:510px;
position:relative;
margin:120px auto 50px;
}
#slideShow{
position:absolute;
height:490px;
width:490px;
background-color:#fff;
margin:10px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#slideShow ul{
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
list-style:none;
overflow:hidden;
}
#slideShow li{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('../img/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{
left:-38px;
}
#previousLink:hover{
background-position:bottom left;
}
a#nextLink{
right:-38px;
background-position:top right;
}
#nextLink:hover{
background-position:bottom right;
} Aunque el #slideShow div se establece en un ancho de 490px , su tamaño completo es en realidad 510px . Esta diferencia de 20 px reduce la escala de las imágenes de diapositivas (ya que están bloqueadas en el ancho del div #slideShow), que se reducen de su tamaño normal de 480 px a 460 px. Como verá en el siguiente paso, estamos usando una animación jQuery para acercar la presentación de diapositivas a su tamaño completo. De esta manera, incluso con el zoom completo, las imágenes tienen su tamaño normal y no hay pérdida de calidad.
jQuery
Aunque la mayoría de los navegadores modernos admiten la rotación de CSS3, sigue siendo bastante tedioso trabajar con las diversas propiedades específicas del proveedor. Afortunadamente, hay complementos disponibles que manejan las tonterías entre navegadores para nosotros. Elegí el plugin de rotación de jQuery, ya que también se integra perfectamente con animate() y css() métodos de la biblioteca, lo que significa que podemos animar fácilmente la rotación de elementos. Como verá en un momento, estamos usando esto en nuestro rotateContainer personalizado. evento, que rota el #slideShow div.
script.js - Parte 1
$(document).ready(function(){
var slideShow = $('#slideShow'),
ul = slideShow.find('ul'),
li = ul.find('li'),
cnt = li.length;
// As the images are positioned absolutely, the last image will be shown on top.
// This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if($.support.transform){
// Modern browsers with support for css3 transformations
li.find('img').css('rotate',function(i){
// Rotating the images counter-clockwise
return (-90*i) + 'deg';
});
// Binding a custom event. the direction and degrees parameters
// are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer',function(e,direction,degrees){
// Zooming in the slideshow:
slideShow.animate({
width : 510,
height : 510,
marginTop : 0,
marginLeft : 0
},'fast',function(){
if(direction == 'next'){
// Moving the topmost image containing Li at
// the bottom after a fadeOut animation
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
}
else {
// Showing the bottommost Li element on top
// with a fade in animation. Notice that we are
// updating the z-indexes.
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
// Rotating the slideShow. css('rotate') gives us the
// current rotation in radians. We are converting it to
// degrees so we can add +90 or -90.
slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');
});
});
// By triggering the custom events below, we can
// show the previous / next images in the slideshow.
slideShow.bind('showNext',function(){
slideShow.trigger('rotateContainer',['next',90]);
});
slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});
} Estoy usando $.support de jQuery objeto para probar si el navegador del visitante admite transformaciones CSS3. Solo vamos a mostrar la rotación en los navegadores compatibles con la transformación, como las versiones más recientes de Firefox, Chrome, Safari y Opera, mientras que en el resto recurrimos a una versión simple de entrada/salida gradual de la presentación de diapositivas.
Internet Explorer proporciona una solución para rotar elementos a través de su sintaxis de filtro patentada, pero no puede manejar la técnica que estamos usando para esta presentación de diapositivas. Entonces, en efecto, verá una presentación de diapositivas en funcionamiento en cualquier navegador, pero solo disfrutará de la versión elegante en aquellos que la admitan.
En el código anterior, puede ver que estamos vinculando una serie de eventos personalizados. mostrar siguiente y mostrar anterior son lo que estamos usando para controlar la presentación de diapositivas. Estos, a su vez, ejecutan el evento giratorioContenedor y pasan la dirección y los grados como parámetros (podría fusionarlos en un solo parámetro, pero lo encuentro más claro de esta manera).
script.js - Parte 2
else{
// Fallback for Internet Explorer and older browsers
slideShow.bind('showNext',function(){
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious',function(){
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
// Listening for clicks on the arrows, and
// triggering the appropriate event.
$('#previousLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showPrevious');
return false;
});
$('#nextLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showNext');
return false;
});
// This function updates the z-index properties.
function updateZindex(){
// The CSS method can take a function as its second argument.
// i is the zero-based index of the element.
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}
}); En la segunda parte del código, puede ver el fragmento que se ejecuta solo en navegadores que no admiten transformaciones CSS3. Note que en este caso, también definimos el mismo showNext y mostrar anterior eventos, pero aquí simplemente se desvanecen dentro / fuera de las imágenes, sin iniciar una rotación.
La actualizaciónZindex() La función es importante, ya que de lo contrario las diapositivas se mostrarían en orden inverso. Esta función recorre los elementos en el orden en que se encuentran actualmente y asigna una propiedad de índice z para que se muestren correctamente.
¡Con esto, nuestra presentación rotativa está completa!
Conclusión
Usando jQuery, creamos una hermosa presentación de diapositivas giratoria, con la que puede mostrar sus imágenes y agregar un poco de interactividad a sus páginas.
¿Cómo mejorarías este ejemplo? Asegúrese de compartir sus pensamientos en la sección de comentarios a continuación.