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