Tema: Agregar Efecto a Slides
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/05/2011, 11:10
Avatar de j84625
j84625
 
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 16 años, 7 meses
Puntos: 2
Agregar Efecto a Slides
Hola no se casi nada de javascrit por no decir nada estoy creando o mejor dicho personalizando un slides que conseguí por internet pero no me gusta el efecto que tiene cuando cambia de div en div quisiera que el efecto no sea lateral y si no es posible que cuando llegue ala ultima div no se vea cuando regresa ala primera

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.   <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.  
  7.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  8.     <script type="text/javascript" src="mainFunctions.js"></script>
  9.  
  10.     <link rel="stylesheet" href="mainCSS.css" media="screen" />
  11.  
  12.   </head>
  13.   <body>
  14.  
  15.       <div class="sliderContainer">
  16.  
  17.       <a href="#siguiente" class="next" title="Siguiente"></a>
  18.       <a href="#anterior" class="prev" title="Anterior"></a>
  19.  
  20.       <div id="slider">
  21.  
  22.           <div class="slidesContainer">
  23.               <div class="slide">Contenido01</div>
  24.               <div class="slide">Contenido02</div>
  25.               <div class="slide">Contenido03</div>
  26.           </div> <!-- /slidesContainer -->
  27.  
  28.       </div> <!-- /slider -->
  29.  
  30.       </div> <!-- /sliderContainer -->
  31.  
  32.   </body>
  33. </html>

Código Javascript: 
Ver original
  1. /*
  2.  * Tutorial Easy slider
  3.  * Autor: Osiris Magro
  4.  * url: http://innominepixel.wordpress.com
  5.  * Fecha: 15/02/2010
  6.  * Compártelo como quieras
  7.  */
  8.  
  9. $(document).ready(function(){
  10.  
  11.     /*
  12.      * Variables
  13.      */
  14.  
  15.     var slides, timer;
  16.  
  17.     //Crea un objeto con información de los slides
  18.     slides = $('#slider .slidesContainer > .slide');
  19.  
  20.  
  21.     /*
  22.      * Funciones
  23.      */
  24.     
  25.     //Desplaza el contenedor hacia la dirección definida
  26.     //@direction = [left,right]
  27.     function sliderScroll(direction){
  28.  
  29.        //Calcula la posición actual del contenedor
  30.        position = $('#slider').scrollLeft();
  31.  
  32.        //Calcula la anchura total menos el último slide.
  33.        //Se usa para calcular cuando el scroll llega al final.
  34.        totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth
  35.  
  36.        //Se comprueba la variable direction para hacer el scroll hacia izquierda o derecha
  37.        switch (direction) {
  38.             case 'right': //Derecha
  39.                 if (position+slides[0].offsetWidth > totalWidth){ //Si la siguiente posición se sale del contenedor, vuelve al principio.
  40.                     $('#slider:not(:animated)').animate({scrollLeft:0},1000);
  41.                 } else { //Si no es el final, suma a la posición actual la anchura del slide.
  42.                     $('#slider:not(:animated)').animate({scrollLeft:position+slides[0].offsetWidth},1000);
  43.                 }
  44.                 break;
  45.  
  46.             case 'left': //Izquierda
  47.                 if (position-slides[0].offsetWidth < 0){ //Si la siguiente posición se sale del contenedor, vuelve al final.
  48.                     $('#slider:not(:animated)').animate({scrollLeft:totalWidth},1000);
  49.                 } else { //Si no es el final, resta a la posición actual la anchura del slide.
  50.                     $('#slider:not(:animated)').animate({scrollLeft:position-slides[0].offsetWidth},1000);
  51.                 }
  52.                 break;
  53.         }
  54.  
  55.    }
  56.  
  57.    //Función que crea el temporizador
  58.    function initTimer(){
  59.         timer = setInterval(function(){sliderScroll('right');}, 5000);
  60.    }
  61.  
  62.  
  63.    /*
  64.     * Código
  65.     */
  66.  
  67.     //Asigna el ancho total de los slides al contenedor
  68.     //La anchura total se obtiene multiplicando la medida de un slide por el número de slides)
  69.     $('#slider .slidesContainer').css('width',slides[0].offsetWidth * slides.length);
  70.  
  71.  
  72.     //Click en el botón "next"
  73.     $('.next').click(function(){
  74.         clearInterval(timer); //Desactiva el temporizador
  75.         sliderScroll('right'); //Mueve el scroll a la derecha
  76.         initTimer(); //Vuelve a activar el temporizador
  77.         return false;
  78.     });
  79.  
  80.     //Click en el botón "prev"
  81.     $('.prev').click(function(){
  82.         clearInterval(timer); //Desactiva el temporizador
  83.         sliderScroll('left'); //Mueve el scroll a la izquierda
  84.         initTimer(); //Vuelve a activar el temporizador
  85.         return false;
  86.     });
  87.  
  88.     //Inicia el temporizador
  89.     initTimer();
  90.  
  91. });

Código CSS: 
Ver original
  1. body{
  2.     background-color:#2D3335;
  3.     color: #FFF;
  4.     font-family:Arial, Helvetica, sans-serif;
  5.     font-size:12px;
  6. }
  7. :focus {
  8.     outline: 0;
  9. }
  10. .sliderContainer{
  11.     width: 750px;
  12.     height: 350px;
  13.     position: relative;
  14.     margin: 25px auto;
  15. }
  16. #slider {
  17.     -moz-border-radius: 10px;
  18.     -webkit-border-radius: 10px;
  19.     width: 600px;
  20.     height: 350px;
  21.     background: #FFF;
  22.     border: 5px solid #FFF;
  23.     overflow: hidden;
  24.     position: relative;
  25.     margin: auto;
  26. }
  27. #slider .slide{
  28.     width: 600px;
  29.     height: 350px;
  30.     float: left;
  31. }
  32. .prev, .next{
  33.     display: block;
  34.     height: 56px;
  35.     width: 56px;
  36.     position: absolute;
  37.     top: 147px;
  38. }
  39. .prev{
  40.     background: url('img/slider-prev.png') no-repeat;
  41.     background-position: 0 0;
  42.     left: 0;
  43. }
  44. .prev:hover{
  45.     background-position: 0 -56px;
  46. }
  47. .next{
  48.     background: url('img/slider-next.png') no-repeat;
  49.     background-position: 0 0;
  50.     right: 0;
  51. }
  52. .next:hover{
  53.     background-position: 0 -56px;
  54. }

Jquery http://ajax.googleapis.com/ajax/libs.../jquery.min.js

Bueno no se si me explico bien pero en pocas palabras solo me gustaria que cuando llegue el ultimo div no se vea que regresa al primero de esa forma por que es muy fea jejeje
__________________
Pagina de sobre los animales
Los animales