jquery - modal - slide show gallery html

jquery simple image slideshow tutorial

Question

¿Dónde puedo encontrar un simple tutorial de diapositivas de imágenes jquery para principiantes desde cero (sin complementos) sin el botón de navegación hacia la izquierda y derecha?

gracias.

Answer 1

Aquí está mi adaptación del tutorial de Michael Soriano. Vea a continuación o en JSBin .

$(function() {
  var theImage = $(''ul#ss li img'');
  var theWidth = theImage.width();
  //wrap into mother div
  $(''ul#ss'').wrap(''<div id="mother" />'');
  //assign height width and overflow hidden to mother
  $(''#mother'').css({
    width: function() {
      return theWidth;
    },
    height: function() {
      return theImage.height();
    },
    position: ''relative'',
    overflow: ''hidden''
  });
  //get total of image sizes and set as width for ul 
  var totalWidth = theImage.length * theWidth;
  $(''ul'').css({
    width: function() {
      return totalWidth;
    }
  });

  var ss_timer = setInterval(function() {
    ss_next();
  }, 3000);

  function ss_next() {
    var a = $(".active");
    a.removeClass(''active'');

    if (a.hasClass(''last'')) {
      //last element -- loop
      a.parent(''ul'').animate({
        "margin-left": (0)
      }, 1000);
      a.siblings(":first").addClass(''active'');
    } else {
      a.parent(''ul'').animate({
        "margin-left": (-(a.index() + 1) * theWidth)
      }, 1000);
      a.next().addClass(''active'');
    }
  }

  // Cancel slideshow and move next manually on click
  $(''ul#ss li img'').on(''click'', function() {
    clearInterval(ss_timer);
    ss_next();
  });

});

* {
  margin: 0;
  padding: 0;
}
#ss {
  list-style: none;
}
#ss li {
  float: left;
}
#ss img {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="ss">
  <li class="active">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg">
  </li>
  <li>
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg">
  </li>
  <li class="last">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg">
  </li>
</ul>

Answer 2

Este es de lejos el ejemplo más fácil que he encontrado en la red. http://jonraasch.com/blog/a-simple-jquery-slideshow

Resumiendo el ejemplo, esto es lo que necesita para hacer una presentación de diapositivas:

HTML:

<div id="slideshow">
    <img src="img1.jpg" style="position:absolute;" class="active" />
    <img src="img2.jpg" style="position:absolute;" />
    <img src="img3.jpg" style="position:absolute;" />
</div>

La posición absoluta se usa para poner una imagen sobre la otra.

CSS

<style type="text/css">
    .active{
        z-index:99;
    }
</style>

La imagen que tiene la clase = "activa" aparecerá sobre las demás, la clase = propiedad activa cambiará con el siguiente código de Jquery .

<script>
    function slideSwitch() {
        var $active = $(''div#slideshow IMG.active'');
        var $next = $active.next();    

        $next.addClass(''active'');

        $active.removeClass(''active'');
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
</script>

Si desea ir más allá con las presentaciones de diapositivas, le sugiero que eche un vistazo al enlace de arriba (para ver los cambios de oppacidad animados - 2n ejemplo) o en otros tutoriales de presentaciones de diapositivas más complejos.

Answer 3

Esto parece algo en lo que te interesaría

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/

Answer 4

No sé por qué no marcó una de estas respuestas gr8 ... aquí hay otra opción que le permitirá a usted y a cualquier otra persona que visite controlar la velocidad de transición y el tiempo de pausa

JAVASCRIPT

$(function () {

    /* SET PARAMETERS */
    var change_img_time     = 5000; 
    var transition_speed    = 100;

    var simple_slideshow    = $("#exampleSlider"),
        listItems           = simple_slideshow.children(''li''),
        listLen             = listItems.length,
        i                   = 0,

        changeList = function () {

            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });

        };

    listItems.not('':first'').hide();
    setInterval(changeList, change_img_time);

});

.

HTML

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>

.
Si mantienes esto simple es fácil mantenerlo resposivo
es mejor visitar el: DEMO

.
Si quieres algo con FX de transición especial (todavía sensible), mira esto
DEMO CON FX ESPECIAL