web-dev-qa-db-fra.com

jquery simple diaporama d'images tutoriel

Où puis-je trouver un tutoriel de diaporama d'images jQuery simple pour les débutants à partir de zéro (sans plugins) sans boutons de navigation gauche et droit?

je vous remercie.

jqueryimageslideshow
34
vaanipala

C'est de loin l'exemple le plus simple que j'ai trouvé sur le net. http://jonraasch.com/blog/a-simple-jquery-slideshow

En résumé, voici ce dont vous avez besoin pour créer un diaporama:

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 position absolue est utilisée pour placer chaque image l'une sur l'autre.

[~ # ~] css [~ # ~] 

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

L'image qui a la classe = "active" apparaîtra sur les autres, la propriété class = active changera avec le code suivant 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 vous voulez aller plus loin avec les diaporamas, je vous suggère de consulter le lien ci-dessus (pour voir les modifications d'opopacité animées - exemple 2n) ou d'autres didacticiels plus complexes.

50
zurfyx

Je ne sais pas pourquoi vous n'avez pas noté l'une de ces réponses gr8 ... voici une autre option qui permettrait à vous et à tous les autres visiteurs de contrôler la vitesse de transition et le temps de pause

[~ # ~] 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 vous gardez cela aussi simple, il est facile de le garder réactif.
préférable de visiter le: DÉMO

.
Si vous voulez quelque chose avec un effet de transition spécial (toujours réactif) - regardez ceci
DEMO AVEC SPECIAL FX

18
Sagive SEO

Voici mon adaptation du tutoriel de Michael Soriano. Voir ci-dessous ou dans 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>
4
Justin

Cela ressemble à quelque chose qui vous intéresserait

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

3
Schokea