jQuery super easy Content Slider / Switcher

Gepostet am März 27, 2013

Wer eine ganz einfache Lösung zum faden von DIV Containern oder sonstigen HTML Elementen sucht kann das folgende Script verwenden.

HTML Aufbau:

1
2
3
<div class="keyword_box">INHALT 1</div>
<div class="keyword_box">INHALT 2</div>
<div class="keyword_box">INHALT 3</div>

Css:

1
.keyword_box { display:none; }

JS Script dazu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
jQuery(function($){
 
    function startContentSwitch(cssClassName) {
        var n = $('.'+cssClassName).length;
        if (n==0) return false;
 
        var c = 0;
        function switchIt() {
            if (n==c) c = 1;
            else c++;
            var i = 0;
            $('.'+cssClassName).each(function() {
                i++;
                if (i==c) {
                    $(this).fadeIn('slow').addClass('active');
                } else {
                    if ($(this).hasClass('active')) 
                         $(this).removeClass('active').fadeOut('slow');
                }
            });
        }
        switchIt();
        window.setInterval(switchIt, 5000);
    }
 
    //start
    startContentSwitch('keyword_box');
 
});

Die Klassen „keyword_box“ kann man natürlich einfach abändern.

Und einbinden der jQuery Lib nicht vergessen:

1
2
3
4
5
6
7
//alternative Google
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
 
//alternative jQuery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Tags:

2 Antworten bis “jQuery super easy Content Slider / Switcher”

  1. Luzie
    Mai 06, 2013
    Reply

    Hallo

    ich suche einen ganz einfachen divSlider, dieser gefällt mir sehr gut. Ich möchte die divs allerdings gerne nach left floaten (das kann ich ja in der Klasse angeben). Allerdings müsste ich es etwas abwandeln in der Form, dass nicht beim Start alle divs dargestellt werden sondern der Reihe nach durchlaufen. Kannst Du mir einen Tipp geben?


    • Marcel
      Mai 07, 2013
      Reply

      Hallo,

      dieses Beispiel soll wirklich nur einen Ansatz für einen einfachen DIV-Containerwechsel geben. Alle DIV kann man entweder durch css auslebenden:
      .keyword_box { display:none; }
      .keyword_box.active { display:block; }
      oder man verwendet einen jQuery Befehl nach Aufruf der „startContentSwitch“ Funktion:
      $(„.keyword_box“).hide();

      Durch den „fadeIn“ und „fadeOut“ Befehl, werden die Blöcke dann eingeblendet und der zuvor aktive ausgeblendet.



Leave a Reply

 

Posts of Current Category



Facebook: