Foros del Web » Programando para Internet » Jquery »

Slider jquery con diferentes tiempos por cada slide

Estas en el tema de Slider jquery con diferentes tiempos por cada slide en el foro de Jquery en Foros del Web. Hola a todos, terminando de buscar una solucion a este problema, he visto muchos slider o carruseles, lo que necesito es darle tiempos a cada ...
  #1 (permalink)  
Antiguo 13/01/2011, 16:50
 
Fecha de Ingreso: julio-2009
Mensajes: 1
Antigüedad: 15 años, 3 meses
Puntos: 1
Slider jquery con diferentes tiempos por cada slide

Hola a todos, terminando de buscar una solucion a este problema, he visto muchos slider o carruseles, lo que necesito es darle tiempos a cada slide

estoy utilizando el codigo de esta pagina, he hecho minimas modificaciones pero no se como hacer para colocarle un tiempo distinto a cada slide, Gracias por sus respuestas.

Aca esta el codigo que utilizo
http://www.serie3.info/s3slider/index.php

html

Código HTML:
<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div> 
JS
Código HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 7000 
        });
    });
</script> 
s3Slider.js
Código HTML:
(function($){  

    $.fn.s3Slider = function(vars) {       
        
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            
        items.each(function(i) {
    
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
            
        });
        
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        
        makeSlider();

    };  

})(jQuery);
  #2 (permalink)  
Antiguo 13/01/2011, 16:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 10/01/2012, 07:26
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Chile
Mensajes: 2
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Slider jquery con diferentes tiempos por cada slide

Amigo, pudiste resolver tu problema? ... tengo la misma duda y no encuentro nada por internet...

Etiquetas: diferentes, slide, slider
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:36.