it-swarm.com.de

jQuery einfaches Bild Diashow Tutorial

Wo finde ich ein einfaches Diashow-Tutorial für Anfänger von Grund auf (ohne Plugins) ohne linke und rechte Navigationstaste?

danke dir.

34
vaanipala

Dies ist mit Abstand das einfachste Beispiel, das ich im Internet gefunden habe. http://jonraasch.com/blog/a-simple-jquery-slideshow

Fassen Sie das Beispiel so zusammen, dass Sie eine Diashow erstellen müssen:

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>

Die absolute Position wird verwendet, um ein Bild über das andere zu legen.

[~ # ~] CSS [~ # ~]

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

Das Bild mit der class = "active" wird über den anderen angezeigt. Die class = active -Eigenschaft ändert sich mit dem folgenden JQuery-Code .

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

        $next.addClass('active');

        $active.removeClass('active');
    }

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

Wenn Sie mit Diashows weitermachen möchten, empfehlen wir Ihnen, sich den obigen Link anzuschauen (um animierte Änderungen der Gegner zu sehen - 2n Beispiel) oder sich andere komplexere Tutorials für Diashows anzusehen.

50
zurfyx

Ich weiß nicht, warum Sie diese gr8-Antworten nicht markiert haben ... hier ist eine weitere Option, mit der Sie und alle anderen Besucher die Übergangsgeschwindigkeit und die Pausenzeit steuern können

[~ # ~] 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>

.
Wenn du das einfach hältst, ist es leicht, es atmungsaktiv zu halten
Am besten besuchen Sie die: DEMO

.
Wenn Sie etwas mit speziellen Übergangseffekten möchten (immer noch ansprechbar), probieren Sie dies aus
DEMO MIT SPECIAL FX

18
Sagive SEO

Hier ist meine Adaption von Michael Sorianos Tutorial. Siehe unten oder in 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

Das sieht aus wie etwas, das Sie interessieren würde

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

3
Schokea