https://www.quermania.de/css-js-tools/bildlauf11.js

1var mausObjekt = null; // mit var sind alle Variablen lokal / ohne var sind alle Vokalbeln global / Variablen in Funktionen sind immer lokal
2MaxScrollWert = 0;;
3var automatischerBildlauf;
4var stoppBildlauf = 0;
5var startTimer = 4000;
6clearTimeout(automatischerBildlauf);
7
8// seit 05.07.22 wird diese Funktion nicht mehr aufgerufen
9function startAnzeige() {
10	setTimeout(function(){ sindAlleBilderDa(); }, 10);
11	}
12
13// initBildergalerie() wird ab 01.07.2020 auch bei onload aufgerufen, weil ...children[i].complete beim erneuten laden nicht immer funktioniert
14// seit 04.05.2022 wird initBildergalerie() ohne onload am Ende der Seiten, nach dem Include dieses Skriptes aufgerufen, da onload ohnehin das Laden der Bilder nicht berücksichtigt.
15
16// seit 05.07.22 wird diese Funktion nicht mehr aufgerufen
17function sindAlleBilderDa() {
18	var allesDa = 'true';
19	for (i = 0; i < anzahlBilder; i++) {
20		x = document.getElementById("bildcontainer").children[i].complete;
21		if (x != true) {allesDa = 'false'}
22		} 
23	if (allesDa != 'false') {
24		initBildergalerie();
25		}
26	else {
27		startAnzeige(); // Rücksprung
28		}
29	}
30
31function initBildergalerie() {
32	if (document.getElementById("bildfenster")){
33		if (MaxScrollWert < 1) {
34			clearTimeout(automatischerBildlauf);
35			document.getElementById('bildfenster').style.display = "block";
36			document.getElementById('bildcontainer').style.display = "block";
37			document.getElementById('bilderLaden').style.display = "none";
38			fensterbreite = window.innerWidth;
39			if(fensterbreite > 2330){ fensterbreite = 2330;} //max. Breite table.quermaniainhalt = 2130, Menübreite = 200
40			anzahlZwischenraum = anzahlBilder - 1;
41			MaxScrollWert = anzahlBilder * 351 + anzahlZwischenraum * 20 - fensterbreite + 456; // eigentlich 458, aber wegen Scrolleffekt bei Fenster = 1920px heruntergesetzt
42			if (MaxScrollWert < 1) {
43				document.getElementById('bildfenster').style.cursor = "auto";
44				}
45			else {
46				document.getElementById('bildfenster').style.cursor = "all-scroll";
47				if (stoppBildlauf < 1) {startBildlauf();}
48				}
49			}
50		}
51	}
52
53// das Problem ist, dass der Eventlistener: touchstart nicht reagiert, wenn die Bilder durch den Schwung mittels Finger noch in Bewegung sind
54function scrollFinger() {
55	clearTimeout(automatischerBildlauf);
56	startTimer = 12000; // .., deshalb startet der Bildlauf nach einem Touchereignis deutlich später
57	}
58
59function initScrollMaus() {
60	clearTimeout(automatischerBildlauf);
61	scrollWert = document.getElementById("bildcontainer").scrollLeft ;
62	mausObjekt = document.getElementById("bildfenster") ;
63	startX = mausImBody - mausObjekt.offsetLeft;
64	objektPosition = mausObjekt.offsetLeft;
65	}
66
67function scrollMaus(ereignis) {
68	mausImBody = ereignis.pageX;
69	if (mausObjekt != null) {
70		clearTimeout(automatischerBildlauf);
71		scrollWertneu = scrollWert - mausImBody + objektPosition + startX;
72		if (scrollWertneu > MaxScrollWert) {scrollWertneu = scrollWert = MaxScrollWert; startX = mausImBody - mausObjekt.offsetLeft;}
73		if (scrollWertneu < 1) {scrollWertneu = scrollWert = 0; startX = mausImBody - mausObjekt.offsetLeft; }
74		document.getElementById("bildcontainer").scrollLeft = scrollWertneu;
75		}
76	}
77
78function stopMaus(ereignis) {
79	if (mausObjekt != null) {
80		mausObjekt = null;
81		startBildlauf();
82		}
83	}
84
85function stopTouch(ereignis) {
86	clearTimeout(automatischerBildlauf); // am 06.07.22 hinzugefügt, da es weiterhin bei mehreren Touchs Probleme gab
87	startBildlauf();
88	}
89
90function startBildlauf(){
91	if (MaxScrollWert > 0 && mausObjekt == null) {
92		clearTimeout(automatischerBildlauf);
93		automatischerBildlauf = setTimeout(function(){ 
94			scrollWert = document.getElementById("bildcontainer").scrollLeft; 
95			bildVor(); }, startTimer);  // nach Touch-Ereignis höhere Verzögerung - von 4000 auf 12000 - damit sich Bilder bei erneutem Touch nicht mehr bewegen
96		}
97	}
98
99function bildVor(){
100	//Zuerst die Funktion für das Ende des Vorlaufs
101	if (scrollWert > MaxScrollWert) {
102		scrollWert = MaxScrollWert; 
103		clearTimeout(automatischerBildlauf);
104		automatischerBildlauf = setTimeout(function(){ bildZurueck(); }, 4000);
105		} 
106	else {
107		scrollWert = scrollWertneu = scrollWert + 1;
108		document.getElementById("bildcontainer").scrollLeft = scrollWert;
109		scrollAutomatischVor();
110		}
111	}
112
113function scrollAutomatischVor(){
114	automatischerBildlauf = setTimeout(function(){ bildVor(); }, 20);  // ursprünglich 20
115	}
116
117function bildZurueck(){
118	if (mausObjekt == null) {
119		clearTimeout(automatischerBildlauf);
120		document.getElementById("bildcontainer").scrollBy({ left: -scrollWert, behavior: "smooth" });  // Left ist kein absoluter, sondern ein relativer Wert
121		scrollWert = 0;
122		automatischerBildlauf = setTimeout(function(){ bildVor(); }, 4000);
123		}
124	}
125
126if (document.getElementById("bildfenster")) { 
127	var anzahlBilder = document.getElementById("bildcontainer").childElementCount;
128	if (window.innerWidth > 1900 && anzahlBilder < 5) {
129		stoppBildlauf = 1;
130		// initBildergalerie(); // am 05.07.22 herausgenommen, da bereits das Javascript in den Seiten initBildergalerie() startet
131		}
132	//else {
133		// startAnzeige(); // am 05.07.22 herausgenommen, da bereits das Javascript in den Seiten initBildergalerie() startet
134	//	}
135	document.getElementById("bildcontainer").addEventListener("touchstart", scrollFinger);
136	document.getElementById("bildcontainer").addEventListener("touchend", stopTouch);
137	document.getElementById("bildfenster").addEventListener("mousedown", initScrollMaus);
138	document.getElementById("bildfenster").onmousemove = scrollMaus;
139	document.getElementById("bildfenster").onmouseleave = stopMaus;
140	window.onmouseup = stopMaus;
141	}