Может быть, это поможет?
//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, inArray, isNum, isInt; // for use on other loads
addEventListener('load', ()=>{
get = (url, success)=>{
const x = new XMLHttpRequest;
x.open('GET', url);
x.onload = ()=>{
if(success)success(JSON.parse(x.responseText));
}
x.send();
return x;
}
post = (url, send, success)=>{
const x = new XMLHttpRequest;
x.open('POST', url);
x.onload = ()=>{
if(success)success(JSON.parse(x.responseText));
}
if(typeof send === 'object' && send && !(send instanceof Array)){
if(typeof FormData !== 'undefined' && send instanceof FormData){
x.send(send);
}
else{
let s, r = [];
for(let p in send){
s = send[p];
if(typeof s === 'object')s = JSON.stringify(s);
r.push(encodeURIComponent(p)+'='+encodeURIComponent(s));
}
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.send(r.join('&'));
}
}
else{
throw new Error('send argument must be an Object');
}
return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
const w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
const w = within || doc;
return w.querySelectorAll(selector);
}
hC = (element, className)=>{
return element.classList.contains(className);
}
aC = (element, className, func)=>{
element.classList.add(className.trim());
if(func)func(element);
return (className, func)=>{
return aC(element, className, func);
}
}
rC = (element, className, func)=>{
element.classList.remove(className.trim());
if(func)func(element);
return (className, func)=>{
return rC(element, className, func);
}
}
tC = (element, className, yFunc, nFunc)=>{
const c = element.classList, n = className.trim();
if(c.contains(n)){
c.remove(n);
if(nFunc)nFunc(element);
}
else{
c.add(n);
if(yFunc)yFunc(element);
}
return (className, yFunc, nFunc)=>{
return tC(element, className, yFunc, nFunc);
}
}
inArray = (mixed, array)=>{
if(array.indexOf(mixed) === -1){
return false;
}
return true;
}
isNum = mixed=>typeof mixed === 'number' && !isNaN(mixed); isInt = mixed=>Number.isInteger(mixed);
// put below on another page using a load Event - except the end load line and below
function FadeMaker(faderElement, placesElement){
const places = [];
let place;
this.addPlace = (name, background)=>{
const h = M('h1'), d = M('div');
aC(d, 'fadeOut'); d.style.backgroundImage = 'url("'+background+'")';
h.textContent = name;
h.onmouseenter = ()=>{
rC(place, 'fadeIn'); aC(place, 'fadeOut'); rC(d, 'fadeOut'); aC(d, 'fadeIn');
place = d;
}
placesElement.appendChild(h); faderElement.appendChild(d); places.push([h, d]);
return this;
}
this.make = ()=>{
place = places[0][1]; rC(place, 'fadeOut');
places.forEach(a=>{
aC(a[1], 'fade');
});
return this;
}
}
const fm = new FadeMaker(I('fader'), I('places'));
fm.addPlace('Equador', 'https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg').addPlace('Seattle', 'https://cdn.vox-cdn.com/thumbor/avHeJenMsyJoJ3WBGHl24QWnybk=/0x0:7360x4912/1200x675/filters:focal(3092x1868:4268x3044)/cdn.vox-cdn.com/uploads/chorus_image/image/66498601/shutterstock_482690140.0.jpg').addPlace('Arizona', 'https://azgovernor.gov/sites/default/files/styles/panopoly_image_original/public/6871930-arizona.jpg?itok=sbFgZG8r').make();
}); // end load
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body,.container,#fader,.fade{
width:100%; height:100%;
}
.container{
position:relative;
}
.container>div,.fade{
position:absolute;
}
.fade{
background-position:center; background-size:cover; transition:opacity 0.5s ease-in-out;
}
.hide{
display:none;
}
#places>h1{
cursor:pointer; color:#fff; font:bold 48px Helvetica; padding:10px 20px 10px;
}
.fadeOut{
opacity:0;
}
.fadeIn{
opacity:1;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='container'>
<div id='fader'></div>
<div id='places'></div>
</div>
</body>
</html>
Вы можете игнорировать большую часть JavaScript выше FadeMaker ... но использовать этот материал постоянно в будущем. Обратите внимание, что FadeMaker принимает два аргумента. Один, где все элементы фейдера go, а другой, где имя Элементы go. Как только вы создаете экземпляр new, вы просто fadeMakerInstance.addPlace(yourNameHere, yourURLHere), затем .make(), когда вы закончите. Обратите внимание, что вам не нужно связывать методы, как показано в примере. Если у вас есть переменная экземпляра, вы можете сразу выполнить ее, например fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make().