I'm having some problems rewriting this slideshow function in Javascript. Because of some project constraints, I have to revert back to plain JS.
$(".fadein img:gt(0)").hide();
setInterval(function() {
$(".fadein :eq(0)").fadeOut(2000)
.next().fadeIn(1000)
.end().appendTo('.fadein');
}, 240000)
Here's a good start for you.
Take a look at: How to do fade-in and fade-out with JavaScript and CSS
And please provide a minimal reproducible example
let fadeInImgElements = document.querySelectorAll('.fadein>img:not(:first-child)');
let fadeInElement = document.querySelector('.fadein:first-child');
const fadeOut = function(element, interval) {
var op = 1; // initial opacity
var timer = setInterval(function() {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, interval);
}
const fadeIn = function(element, interval) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function() {
if (op >= 1) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, interval);
}
fadeInImgElements.forEach(function(img) {
img.style.display = "none";
})
setInterval(function() {
fadeOut(fadeInElement, 50);
fadeIn(fadeInElement.nextElementSibling, 50);
document.querySelector('.fadein').appendChild(fadeInElement.nextElementSibling);
}, 1000)<div class="fadein">
<img alt='fadeInImg' src="https://png.pngtree.com/png-vector/20190406/ourmid/pngtree-img-file-document-icon-png-image_919866.jpg">
<img alt='fadeInImg' src="https://png.pngtree.com/png-vector/20190406/ourmid/pngtree-img-file-document-icon-png-image_919866.jpg">
</div>