Wie können CSS -Übergänge sich gegenseitig durch JS -Trigger unterbrechen?HTML

HTML-Programmierer
Guest
 Wie können CSS -Übergänge sich gegenseitig durch JS -Trigger unterbrechen?

Post by Guest »

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 = new Image;
bilder.src = bilderurl;
}
i = 0;

function changebg()
{
i++;
if (i == bilderurl.length) i = 0;
element.style.backgroundImage = "url(" + bilderurl + ")";
}
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>

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post