https://berufsbilder-online.de/media/js/rotation-jq-pi.js

1/*  my jquery-plugin for banner-rotation
2 *  dependency: mod.banner2tags_2.0.php
3 *  get "carousel" container, clone from "bannerBox", shuffle divs, start rotate
4 *  changed: all "rotation" divs must be of equal height!
5 *  rewritten 2018-12-18
6 **/
7(function( $ ) {
8    $.fn.myRotation = function(o) {
9	var oP = $.extend({
10            show: 3
11	    ,duration: 2000    // time of slide
12            ,transition: 5000  // time til next slide
13        }, o );
14	var D = true;                   // debug flag
15	var timer = null;               // interval obj
16	var transition = oP.transition; // in msec
17	var fl_run = true;
18
19	var self = this;                // #carousel div
20	var maxH = self.height();       // maximum height?
21	var panelH = 0;                 // the needed (frame)-height
22	var aH = [];                    // array of all div-heights class:rotation
23
24	var domSlideDiv = self.find(".slideDiv"); // the div which is sliding
25	var iRot = 0;     // count rotation divs
26	var domRotDiv = self.find("div.rotation");
27	var iClone = 0;   // number of divs to be cloned; = show if all equal
28	
29	var setY = 0;   // needed height
30	var memH = 0;   // store "visible" height
31
32	var iCurr = 0;    // counter for banner currently on top
33	var cssTopSlide = parseInt($(domSlideDiv).css('top'));
34	var iY = 0;      // current y position int (px)
35	
36	var setup = function() {
37	    domRotDiv = self.find("div.rotation"); // update here after shuffle!
38	    if (domSlideDiv.length == 0) return false;
39	    iRot = domRotDiv.length;
40	    if (oP.show > iRot) oP.show = iRot;
41	    domRotDiv.each(function() {
42		var idx = $(this).index();
43		var h = $(this).outerHeight(true);
44		aH.push(h);
45	    });
46	    for (i=0; i < oP.show; i++) {
47		panelH += aH[i];
48	    }
49	    self.css("height", panelH);
50
51	    // clone and add to bottom of slider
52	    iClone = oP.show; // always the same?
53	    domSlideDiv.append( domRotDiv.slice(0, iClone).clone() );
54	    return true;
55	}
56
57	var slide = function() {
58	    if (iCurr >= iRot) {
59		iCurr = 0;
60		iY = 0;
61		domSlideDiv.css("top", 0);
62	    }
63	    iY = (iY - parseInt(aH[iCurr]) );
64	    domSlideDiv.animate({top: iY}, {duration: oP.duration});
65	    iCurr++;
66	}
67
68	var shuffle = function() {
69	    var oParent = domRotDiv.first().parent();
70	    var divs = oParent.children();
71	    while (divs.length) {
72		oParent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
73	    }
74	}
75
76	var start = function() {
77	    stop();
78	    timer = setInterval(function() {slide();}, transition);
79	}
80	var stop = function() {
81	    if (timer) clearInterval(timer);
82	};
83	
84	this.run = function() {
85	    shuffle();
86	    if (! setup() ) {console.log("rotation failed!"); return false;}
87	    start();
88	}
89	// start with delay
90	setTimeout(function() { self.run(); }, 500);
91
92	// event-handler
93	this.bind('mouseover', function() {stop();});
94	this.bind('mouseout', function() {start(self);});
95    }
96})( jQuery );
97
98jQuery(window).ready(function() {
99    $("div.carousel").each(function() {
100	if ($(this).find('div.rotation').length == 0) {
101	    if ($(this).parent().parent().attr("class") == "panelCorny") $(this).parent().parent().css("display","none");
102	}
103	else {
104	    var oP = {};
105	    var oPa = $(this).parent();
106	    if (oPa.attr("data-show").length) oP.show = parseInt(oPa.attr("data-show"));
107	    if (oPa.attr("data-transition").length) oP.transition = parseInt(oPa.attr("data-transition"))*1000;
108	    if (oPa.attr("data-duration").length) oP.duration = parseInt(oPa.attr("data-duration"))*1000;
109	    $(this).myRotation(oP);
110	    
111	}
112    });
113});