JavaScript Fader

Beispiel: ohne großes Framework
IMG_6867IMG_6868IMG_6869IMG_6870IMG_6871IMG_6872
JavaScript:
fader.js JavaScript (1,37 kByte) 30.11.2021 23:39
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';

  function Fader(el) {
    this.imgs = [];
    this.currentFade = 0;
    this.init(el);
  }
  Fader.prototype = {
    fade: function () {
      var self = this;
      var nIndex = this.imgs[this.currentFade+1]?this.currentFade+1:0;
      this.imgs[nIndex].classList.add('active');
      this.imgs[this.currentFade].classList.remove('active');
      this.currentFade = nIndex;
      setTimeout(function () {
        self.fade();
      }, 3000);
    },
    init: function (fader) {
      var self = this;
      this.imgs = fader.children;
      this.imgs[0].classList.add('active');
      setTimeout(function () {
        self.fade();
      }, 3000);
    }
  };

  var els = document.querySelectorAll('.fader'), cnt = els.length, i;
  if (els.length > 0) {
    if (!document.getElementById('fader.css')) {
      var style = document.createElement("link");
      style.type = 'text/css';
      style.addEventListener('load', function () {
        init();
      });
      style.href = '/code/fader/fader.css';
      style.id = 'fader.css';
      style.rel = 'stylesheet';
      document.head.appendChild(style);
    } else {
      init();
    }
    function init() {
      for (i=0; i < cnt; i++) {
        new Fader(els[i]);
      }
    }
  }
})();
StyleSheet:
fader.css StyleSheet (362 Bytes) 06.09.2021 16:59
/* coding: utf-8 */
.fader {
  position: relative;
  width: 100%;
  height: 0;
  min-height: 1px;
  padding-top: 44%;
}
.fader > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  visibility: hidden;
  opacity: 0;
  transition: visibility 2s linear,opacity 2s linear;
}
.fader > img.active {
  visibility: visible;
  opacity: 1;
}
HTML:
fader.htm HTML (529 Bytes) 30.11.2021 23:42
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Fader</title>
  </head>
  <body>
    <div class="fader"><img src="/media/IMG_6867.jpg" /><img src="/media/IMG_6868.jpg" /><img src="/media/IMG_6869.jpg" /><img src="/media/IMG_6870.jpg" /><img src="/media/IMG_6871.jpg" /><img src="/media/IMG_6872.jpg" /></div>
    <script id="fader.js" src="fader.js"></script>
  </body>
</html>

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.71
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Tue, 26. Mar 2024 07:33:29

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz