Und noch ein Fader in JavaScript

Xfader.htm HTML (5,97 kByte) 04.04.2021 17:36
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Fader</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
    <style type="text/css">
      body {margin:0; padding:0;}
#wrapper {position:absolute; width:100%; height:100%; /*height:90%;*/ margin:0; padding:0; overflow:hidden;}
#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;}
    </style>
    <script type="text/javascript">
      /* <![CDATA[ */
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback){
            window.setTimeout(callback, 1000 / 60);
          };
})();

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.requestAnimFrame(tick);
    } else {
      if (fc) fc();
    }
  };
  tick();
}

function getElementsByClassName(searchClass, tagName, domNode) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(var i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1) {
      el[j++] = tags[i];
    }
  };
  return el;
}

function getChildNodes(parentElement, tagName) {
  var childs = parentElement.childNodes;
  var children = [];
  for (var i=0; i<childs.length; i++) {
    if (((childs[i].nodeType == 1) ? childs[i].tagName.toLowerCase() : '') == tagName) {
      children.push(childs[i]);
    }
  };
  return children;
}

function jsFader(){
  this.obj = null;
  this.items = [];
  this.currentFade = 0;
}
jsFader.prototype = {
  fit: function(el) {
    var it = el || this.items[this.currentFade];
    var img = getChildNodes(it, 'img')[0];
    if ((img.width / img.height) >= (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);
  },
  init: function(fader) {
    var self = this;
    this.obj = fader;
    this.items = getChildNodes(fader, "div");
    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);
    if (window.addEventListener) {
      window.addEventListener('resize', function(event) {self.fit();});
    } else if (window.attachEvent) {
      window.attachEvent('onresize', function(event) {self.fit();});
    } else {
      window['onresize'] = function(event) {self.fit();};
    }
  }
}
function init() {
  var faderList = getElementsByClassName("fader", "div");
  for (var i=0; i<faderList.length; i++) {
    var fader = new jsFader();
    fader.init(faderList[i]);
  };
}

function ready(f){/complete|loaded/i.test(document.readyState)?f():setTimeout("ready("+f+")",9)}
ready(init);
/* ]]> */
    </script>
  </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>
  </body>
</html>

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Google Maps-Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.104
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 9. Oct 2021 15:16:12
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.3 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 800.000 MHz