Beispiel: ohne großes Framework
JavaScript:
fader.js JavaScript (1,37 kByte) 30.11.2021 23:39
(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
.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>
