Такая ситуация: < /p>
1 фоновый слой, 4 изображения, которые должны заменить друг друга в этом фоновом слое - в интервале времени (4 сек) с мягким переходом (1,5 Sec) и 4 ссылки/кнопки, которые должны запустить необходимый фон изображения на Mouseover. Измененный фон должен оставаться до тех пор, пока мышь не покинет кнопку. Установите сразу же и жестким переходом. Как это предотвратить? />
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>
Пожалуйста, помогите мне, это действительно должно быть возможно. Спасибо в предыдущем.
yours,
peter < /p>
Подробнее здесь: https://stackoverflow.com/questions/794 ... s-triggers
