Home

Event Slider





$(document).ready(function(){
var width = 720;			//Bildbreite für verschiebung
var animationSpeed = 500;	//Geschwindigkeit des wechsels hier 500ms
var pause = 2000;			//Zeit die das Bild angezeigt werden soll 2sec
var currentSlide = 1;		//Startpunkt

var $slider = $('#slider'); //Das div mit id=slider wird an variable zugewiessen, in diesem sind alle Bilder enthalten
var $slideContainer = $slider.find('.slides');		//UL mit den Bilder
var $slides = $slideContainer.find('.slide');		//Die einzelnnen Bilder als Array

//Den ersten Slide wird unten ran Kopiert damit wieder mit diesem begonnen wird
$slideContainer.append($slides.first().clone());

var interval;

// Slider Funktion
function startSlider(){
  interval = setInterval(function() {
  		//Der Linke Rand wird minus animiert, mit Geschwindikeitsangabe
	  $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { 	
		  currentSlide++;	// Bildposition wird eins raus gezählt
			if (currentSlide === $slides.length+1) { // Da eins dazugefügt wurde plus eins
			  currentSlide = 1;	// Wenn es am Ende ist, wird die Bildposition auf eins gesetzt
				$slideContainer.css('margin-left', 0); // Der Linke Abstand auch.
		}
	});
}, pause);
}
				
function stopSlider() {		//Dient dazu um den Slider anzuhalten
  clearInterval(interval);
}

function backimg() { 		// funktion um das aktuelle Bild als Hintergrund zu setzen
	var Bilder = $("li.slide img").text("src");
	var bildjetzt = Bilder[currentSlide - 1].getAttribute("src");
	
	$("body").css("background-image", 'url(' + bildjetzt +')');	
	$("body").css("background-size" , "100% 100%");	
}

function resetback() {		// Reset funktion, um Bild wieder zu entfernen
	$("body").css("background-image" , "");
	
};

// Eventhandler die das Ausführen der obigen Funktionen startet
$slider.on('mouseenter', stopSlider).on('mousedown', backimg).on('mouseleave', startSlider);
$("#resetbutton").on('click' , resetback);
startSlider();

});