Und noch ein Fader in JavaScript HTML Xfader.htm HTML (1,26 kByte) 27.10.2021 17:32 <!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8" /> <title>Fader</title> </head> <body> <div id="wrapper"> <div id="big" class="fader"> <div class="fader-item"><img src="/media/IMG_6867.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6868.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6869.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6870.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6871.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6872.jpg" /></div> </div> <div id="small" class="fader"> <div class="fader-item"><img src="/media/IMG_6867.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6868.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6869.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6870.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6871.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6872.jpg" /></div> </div> </div> <script src="/code/animate/Xfader.js"></script> </body> </html> JavaScript Xfader.js JavaScript (2,67 kByte) 27.10.2021 17:54 function animate(elem, attr, dest, callback) { var from, to = dest, el = elem, fc = callback; if (el.style.getPropertyValue) { from = parseInt(el.style.getPropertyValue(attr)); } else { from = parseInt(el.style.getAttribute(attr)); } if (from == to) return; var start = Date.now(); var tick = function() { var t = Math.min(1, ((Date.now() - start) / 1000)); var eased = t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; var val = (eased * (to - from)) + from; if (el.style.setProperty) { el.style.setProperty(attr, val + "px"); } else { el.style.setAttribute(attr, val + "px"); } if (t<1) { window.requestAnimationFrame(tick); } else { if (fc) fc(); } } tick(); } function jsFader(fader){ this.obj = fader; this.items = []; this.currentFade = 0; var self = this; this.items = fader.children; var x=0; for (var i=0; i<this.items.length; i++) { this.fit(this.items[i]); this.items[i].style.left = x+"px"; x = x + this.items[i].offsetWidth; } setTimeout(function() {self.fade();}, 3000); window.addEventListener('resize', function(event) {self.fit();}); } jsFader.prototype = { fit: function(el) { var it = el || this.items[this.currentFade]; var img = it.querySelectorAll('img')[0]; if ((img.naturalWidth / img.naturalHeight) >= (this.obj.offsetWidth / this.obj.offsetHeight)) { img.style.width = 'auto'; img.style.height = '100%'; img.style.top = '0'; img.style.left = -Math.floor((img.width - this.obj.offsetWidth) / 2) + 'px'; } else { img.style.width = '100%'; img.style.height = 'auto'; img.style.left = '0'; img.style.top = -Math.floor((img.height - this.obj.offsetHeight) / 2) + 'px'; } }, fade: function() { var self = this; var width = this.items[this.currentFade].offsetWidth; var last = this.items[this.currentFade]; this.currentFade = this.items[this.currentFade+1] ? this.currentFade+1 : 0; var el = this.items[this.currentFade]; el.style.left = width+'px'; el.style.display = ''; this.fit(this.items[this.currentFade]); animate(el, 'left', '0'); animate(last, 'left', -width, function() {last.style.display = 'none';}); setTimeout(function() {self.fade();}, 3000); } } var style = document.createElement('link'); style.type = 'text/css'; style.rel = 'stylesheet'; style.addEventListener('load', function() { var els = document.querySelectorAll('div.fader'); for (var i=0; i<els.length; i++) { new jsFader(els[i]); } }); style.href = '/code/animate/Xfader.css'; document.head.appendChild(style); StyleSheet Xfader.css StyleSheet (620 Bytes) 27.10.2021 17:51 #wrapper { position: relative; width: 100%; height: 0; min-height: 1px; padding-top: 44%; } #big { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } #small { position: absolute; right: 10px; bottom: 20px; margin: 0; padding: 0; width: 100px; height: 100px; overflow: hidden; border: 3px solid white; } .fader .fader-item{ position: absolute; display: block; top: 0; width: 100%; height: 100%; overflow: hidden; } .fader img{ position: relative; display: block; } Author: Udo Schmal, published: 25.03.2014, last modified: 06.09.2023