Background-image javascript

Question

добрый день как сделать бесконечный цикл изменениния свойства background-image плавный на javascript, знаю как сделать на чистом CSS.спасибо

• fori1ton: @ksardas, если вы будете задавать вопросы на русском языке, то вероятность того, что вам здесь ответят, сильно возрастёт.
• ksardas: есть свойство background-css, и 2 фона, мне нужно чтобы они чередовались, мне надо функция для бесконечной смены фонов(jquery,javscript)set interval...мне не надо слайдеры, я знаю как это делать на javacript через <img>,но мне надо через свойство CSS

Answer 1

Вспомнив курсы телепатов, я готов предположить что вам нужна плавная смена картинок:

• Плавный переход css спрайта у кнопки
• Скрипт: Плавная смена картинки
• Простой скрипт плавной смены картинок на JQuery

• ksardas: спасибо, но по ясновидению у Вас 4;) в хтмл не будет вообще тега <img> только 1 div и надо анимировать его свойство background-image(менять 2 картинки)
• MrFranke: Боюсь что ограничиться стилями тут не получится. Проблема в том, что менять прозрачность background-image нельзя. Возможно можно как то исхитриться с помощью псевдоэлементов, но больше 2х картинок Вы таким образом не сможете менять =) В любом случае если получится реализовать - напишите сюда, будет очень интересно узнать как это можно сделать
• ksardas: можно сделать сколько угодно через CSS, скину обязательно,только вечером, я плохо знаю джаваскрипт мне нужна функция для изменения стиля na javascript, я не понимаю, что взять за отсчет.
• ksardas: .slider img{ width:700px; height:500px; position:absolute; animation-name: ut; animation-duration:8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .slider img:nth-of-type(1) { animation-delay: 6s; } .slider img:nth-of-type(2) { animation-delay: 4s; } .slider img:nth-of-type(3) { animation-delay: 2s; } .slider img:nth-of-type(4) { animation-delay: 0s; } @keyframes ut{ 0% { opacity:1; } 17%{ opacity:1; } 25% { opacity:0; } 92%{ opacity:0; } 100% { opacity:1; } }
• ksardas: <div class="slider"> <img src="/img/1.jpg" > <img src="/img/2.jpg" > <img src="/img/3.jpg" > <img src="/img/4.jpg" > </div>