Ergebnis 1 bis 6 von 6

Thema: Slider

  1. #1
    Neuer Benutzer
    Registriert seit
    30.06.2013
    Beiträge
    2

    Slider

    Hallo,

    ich bin ein Neuling in sachen jQuery.
    Ich benötige einen Slider der mir das Hintergundbild eines DIVs zb. alle 10sek. ändert.
    Es sollte ein einfacher ein-/ausblend Effekt sein, keine Bewegung.

    Ist das mit jQuery möglich?
    Oder hat jemand von euch vielleicht schon ein solches Script?

    Habe es bisher so probiert bin aber gescheitert.

    Code:
    <script type="text/javascript">
    var bgArr = ['images/banner/startseite1.png', 'images/banner/startseite2.png']; 
    var i=0;
    
    // Start the slide show
    var interval = self.setInterval("swapBkgnd()", 5000)  
    
    function swapBkgnd() {
     if (i>(bgArr.length-1) ) {
      i=0
      $("#bg_banner").css("background-image", "url("+bgArr[i]+")");
     }
     else {
      $("#bg_banner").css("background-image", "url("+bgArr[i]+")"); 
     } 
     i++;
    };
    </script>

  2. #2
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.693
    Ist das mit jQuery möglich?
    Natürlich, aber du darfst nicht nur mit .css() arbeiten sondern musst ein .animate() ausführen was die opacity zwischen 0 und 1 ändert....
    Im Callback änderst du dann die url und fadest es wieder ein.

    Also ungefähr so:
    PHP-Code:
    $.fn.fadeInFadeOut = function ( speed ) {
      return 
    this.animate({opacity'toggle'}, speed, function () {
        $(
    this).toggleClass('switch').animate({opacity'toggle'}, speed);
      });
    };

    $(function () {
      $(
    '.fade').fadeInFadeOut(1000);
      
    }); 
    http://jsbin.com/okeyeq/1/edit


    und mit 10 sek. Intervall: http://jsbin.com/okeyeq/2/edit
    Geändert von s4ty (01.07.2013 um 09:52 Uhr)

  3. #3
    Erfahrener Benutzer
    Registriert seit
    01.10.2010
    Ort
    Ludwigshafen
    Beiträge
    713
    We have a strategic plan ... it´s called "doing things"

  4. #4
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.693
    Na gut...wenn es also keine background-images sind....sondern normale images...dann kannst du dir auch eine slideshow bauen...^^

    http://jsbin.com/okeyeq/4/edit

    -speeds variable
    -erweiterbar ( stopOnHover, contentOnHover, thumbnails, transitionsEffectSwitch, ArrowsNextPrev...usw.)
    Geändert von s4ty (01.07.2013 um 14:35 Uhr)

  5. #5
    Neuer Benutzer
    Registriert seit
    30.06.2013
    Beiträge
    2
    Zitat Zitat von s4ty Beitrag anzeigen
    Natürlich, aber du darfst nicht nur mit .css() arbeiten sondern musst ein .animate() ausführen was die opacity zwischen 0 und 1 ändert....
    Im Callback änderst du dann die url und fadest es wieder ein.

    Also ungefähr so:
    PHP-Code:
    $.fn.fadeInFadeOut = function ( speed ) {
      return 
    this.animate({opacity'toggle'}, speed, function () {
        $(
    this).toggleClass('switch').animate({opacity'toggle'}, speed);
      });
    };

    $(function () {
      $(
    '.fade').fadeInFadeOut(1000);
      
    }); 
    http://jsbin.com/okeyeq/1/edit


    und mit 10 sek. Intervall: http://jsbin.com/okeyeq/2/edit

    Danke das hat mir sehr geholfen, aber ich möchte das die Bilder fließend über gehen und wie kann ich nun mehr als 2 Bilder verwenden?

  6. #6
    Erfahrener Benutzer
    Registriert seit
    01.10.2010
    Ort
    Ludwigshafen
    Beiträge
    713
    Anstatt das Rad neu zu erfinden, könntest du natürlich auch ein Plugin benutzen.
    http://malsup.com/jquery/cycle/
    We have a strategic plan ... it´s called "doing things"

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •