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() }
}
)};