JavaScript Fader

Beispiel: ohne großes Framework
IMG_6867IMG_6868IMG_6869IMG_6870IMG_6871IMG_6872
JavaScript:
fader.js JavaScript (968 bytes) 06.09.2021 16:52
// 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) {
    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 (578 bytes) 06.09.2021 17:00
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Fader</title>
    <link rel="stylesheet" id="fader.css" href="fader.css" />
  </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 src="fader.js"></script>
  </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