• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slideshow automatisch laufen lassen

pepesan

Neues Mitglied
Hallo folgende Slideshow würde ich gerne automatisiert laufen lassen und nicht erst auch Click auf die Schaltflächen.
HTML:
<!-- Slideshow HTML -->
                  <div id="slideshow">
                    <div id="slidesContainer">
                      <div class="slide">  
                        <img src="http://www.html.de/images/angebote/ang1.jpg" alt="Angebot1" width="320" height="160" />
                        <div class="ang">
                            <a href="#">Ihre Traumwohnung in Köln Nippes</a>
                        </div>    
                      </div> 
                      <div class="slide">  
                        <img src="http://www.html.de/images/angebote/ang2.jpg" alt="Angebot2" width="320" height="160" />
                        <div class="ang">
                            <a href="#">Ihre Traumwohnung in Köln Kalk</a>
                          </div>  
                      </div>
                      <div class="slide">  
                        <img src="http://www.html.de/images/angebote/ang2.jpg" alt="Angebot2" width="320" height="160" />
                        <div class="ang">
                            <a href="#">Ihre Traumwohnung in Köln Mülheim</a>
                        </div>
                      </div>
                    </div>
                   </div>
                  </div>
                  <!-- Slideshow HTML -->
Code:
jQuery(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 320;
  var slides = jQuery('.slide');
  var numberOfSlides = slides.length;
// Slideshow Effect
  jQuery('#slidesContainer').css('overflow', 'hidden');
  slides.wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});
  jQuery('#slideInner').css('width', slideWidth * numberOfSlides);
  jQuery('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  jQuery('.control')
    .bind('click', function(){
    currentPosition = (jQuery(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    jQuery('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)});
  });

  function manageControls(position){
    if(position==0){ jQuery('#leftControl').hide() } else{ jQuery('#leftControl').show() }
    if(position==numberOfSlides-1){ jQuery('#rightControl').hide() } else{ jQuery('#rightControl').show() }
  }
)};
 
Werbung:
Wo hast Du denn diese Slideshow her? Hast Du sie selbst programmiert? Besser als diesen Code für einen automatischen Ablauf zu ändern ist es wahrscheinlich, eine Slideshow zu verwenden, die diesen unterstützt. Schau dir z. B. das jQuery-Cycle-Plugin an, das ist sehr flexibel und müsste leisten, was Du vorhast.
 
Danke !
Schau ich mir mal.
Diesen code habe ich im Netz gefunden und ihn an meine Bedürfnisse angepasst.
Funktioniert auch super. Bis auf die automatische sliden.
 
Werbung:
Schau dir das mal an: click me!
Da wird ein perfekter slider von Anfang bis Ende super erklärt aufgebaut.

Sent from my GT-I9500 using Tapatalk 2
 
Zurück
Oben