Beispiel: ohne großes Framework
JavaScript:
// 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:
/* 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:
<!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>