Programmiererforum

Eine solche Situation: < /p>
1 Hintergrundschicht, 4 Bilder, die sich in dieser Hintergrundschicht gegenseitig ersetzen sollten - in einem Zeitintervall (4 Sek.) Mit einem weichen Übergang (1,5) Sec) und 4 Links/Schaltflächen, die den erforderlichen Bildhintergrund für Mausover auslösen sollten. Der veränderte Hintergrund sollte bleiben, bis die Maus die Taste verlässt. sofort und durch einen harten Übergang einstellen. Wie kann ich es verhindern? />
Image 01
Image 02
Image 03
Image 04
< /code>
CSS: < /p>
.bg-image {
background-image: url(../_img/Picture1.jpg);
transition-duration: 1500ms !important;
transition-property: background-image;
width: 100%;
height: calc(100% - 50px);
background-position: top center;
background-repeat: repeat-y;
background-size: cover;
background-blend-mode: normal;
background-color: #e6e6eb;
position: fixed;
}
< /code>
JS: < /p>
var interval = 4;
var bilderurl = new Array("_assets/_img/Picture1.jpg", "_assets/_img/Picture2.jpg", "_assets/_img/Picture3.jpg", "_assets/_img/Picture4.jpg");
var bilder = new Array();
let element = document.getElementById("bg-image-de-de");
for (i = 0; i < bilderurl.length; i++)
{
bilder[i] = new Image;
bilder[i].src = bilderurl[i];
}
i = 0;

function changebg()
{
i++;
if (i == bilderurl.length) i = 0;
element.style.backgroundImage = "url(" + bilderurl[i] + ")";
}
window.setInterval("changebg()", 1000 * interval);

function imageOne() {
element.style.backgroundImage = "url(_assets/_img/Picture1.jpg)";
element = null;
};

function imageTwo() {
element.style.backgroundImage = "url(_assets/_img/Picture2.jpg)";
element = null;
};

function imageThree() {
element.style.backgroundImage = "url(_assets/_img/Picture3.jpg)";
element = null;
};

function imageFour() {
element.style.backgroundImage = "url(_assets/_img/Picture4.jpg)";
element = null;
};

function backToChangeBG() {
element = document.getElementById("bg-image-de-de");
};

< /code>
Bitte helfen Sie mir, es sollte wirklich möglich sein. Danke in früherer.
Ihr,
Peter < /p>