Agregar Efecto a Slides

j84625 · #1 (**permalink**) 06/05/2011, 11:10

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="mainFunctions.js"></script>
 
    <link rel="stylesheet" href="mainCSS.css" media="screen" />
 
  </head>
  <body>
 
      <div class="sliderContainer">
 
      <a href="#siguiente" class="next" title="Siguiente"></a>
      <a href="#anterior" class="prev" title="Anterior"></a>
 
      <div id="slider">
 
          <div class="slidesContainer">
              <div class="slide">Contenido01</div>
              <div class="slide">Contenido02</div>
              <div class="slide">Contenido03</div>
          </div> <!-- /slidesContainer -->
 
      </div> <!-- /slider -->
 
      </div> <!-- /sliderContainer -->
 
  </body>
</html>

Código Javascript:

Ver original/*
 * Tutorial Easy slider
 * Autor: Osiris Magro
 * url: http://innominepixel.wordpress.com
 * Fecha: 15/02/2010
 * Compártelo como quieras
 */
 
$(document).ready(function(){
 
    /*
     * Variables
     */
 
    var slides, timer;
 
    //Crea un objeto con información de los slides
    slides = $('#slider .slidesContainer > .slide');
 
 
    /*
     * Funciones
     */
    
    //Desplaza el contenedor hacia la dirección definida
    //@direction = [left,right]
    function sliderScroll(direction){
 
       //Calcula la posición actual del contenedor
       position = $('#slider').scrollLeft();
 
       //Calcula la anchura total menos el último slide.
       //Se usa para calcular cuando el scroll llega al final.
       totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth
 
       //Se comprueba la variable direction para hacer el scroll hacia izquierda o derecha
       switch (direction) {
            case 'right': //Derecha
                if (position+slides[0].offsetWidth > totalWidth){ //Si la siguiente posición se sale del contenedor, vuelve al principio.
                    $('#slider:not(:animated)').animate({scrollLeft:0},1000);
                } else { //Si no es el final, suma a la posición actual la anchura del slide.
                    $('#slider:not(:animated)').animate({scrollLeft:position+slides[0].offsetWidth},1000);
                }
                break;
 
            case 'left': //Izquierda
                if (position-slides[0].offsetWidth < 0){ //Si la siguiente posición se sale del contenedor, vuelve al final.
                    $('#slider:not(:animated)').animate({scrollLeft:totalWidth},1000);
                } else { //Si no es el final, resta a la posición actual la anchura del slide.
                    $('#slider:not(:animated)').animate({scrollLeft:position-slides[0].offsetWidth},1000);
                }
                break;
        }
 
   }
 
   //Función que crea el temporizador
   function initTimer(){
        timer = setInterval(function(){sliderScroll('right');}, 5000);
   }
 
 
   /*
    * Código
    */
 
    //Asigna el ancho total de los slides al contenedor
    //La anchura total se obtiene multiplicando la medida de un slide por el número de slides)
    $('#slider .slidesContainer').css('width',slides[0].offsetWidth * slides.length);
 
 
    //Click en el botón "next"
    $('.next').click(function(){
        clearInterval(timer); //Desactiva el temporizador
        sliderScroll('right'); //Mueve el scroll a la derecha
        initTimer(); //Vuelve a activar el temporizador
        return false;
    });
 
    //Click en el botón "prev"
    $('.prev').click(function(){
        clearInterval(timer); //Desactiva el temporizador
        sliderScroll('left'); //Mueve el scroll a la izquierda
        initTimer(); //Vuelve a activar el temporizador
        return false;
    });
 
    //Inicia el temporizador
    initTimer();
 
});

Código CSS:

Ver originalbody{
    background-color:#2D3335;
    color: #FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
:focus {
    outline: 0;
}
.sliderContainer{
    width: 750px;
    height: 350px;
    position: relative;
    margin: 25px auto;
}
#slider {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: 600px;
    height: 350px;
    background: #FFF;
    border: 5px solid #FFF;
    overflow: hidden;
    position: relative;
    margin: auto;
}
#slider .slide{
    width: 600px;
    height: 350px;
    float: left;
}
.prev, .next{
    display: block;
    height: 56px;
    width: 56px;
    position: absolute;
    top: 147px;
}
.prev{
    background: url('img/slider-prev.png') no-repeat;
    background-position: 0 0;
    left: 0;
}
.prev:hover{
    background-position: 0 -56px;
}
.next{
    background: url('img/slider-next.png') no-repeat;
    background-position: 0 0;
    right: 0;
}
.next:hover{
    background-position: 0 -56px;
}

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

j84625 · #2 (**permalink**) 09/05/2011, 13:37

Alguno me puede ayudar?