1

Есть Html страничка с css файлом.

<div> <p id="head_img">Text with background</p> </div>
#head_img{
   background: url('backgrounds/back1.jpg');
}

в папке backgrounds находится 3 файлa .jpg (back1.jpg, back2.jpg и back3.jpg) Нужно с помощью Js сделать так, чтоб элемент с фоном изменял фон на следующий из папки backgrounds каждые 10 секунд, плюс возникла необходимость делать это плавно.

var intervalID = window.setInterval(setBack, 10000);

var i = 1
var files = 3
var file_url = ''

function setBack() {
            
    file_url = "background: url(backgrounds/back", i, ".jpg);"
    document.write(file_url);

    document.getElementsByClassName('background')[0].style = file_url
    i ++
    if (i > files){
        i = 0
    }
}

первая проблема, не нахожу информации на счет того как вставлять номер файла в текст. Да и к тому же нужно придумать как сделать плавный переход между картинками через размытие. потому что в таком расположении они сменяются резко. что сильно режет глаз

1
  • 3
    Плавный переход может выглядеть по разному (смещение, размытие и .т.п), какой вы хотите? 17 авг 2021 в 9:50

2 ответа 2

4

не нахожу информации на счет того как вставлять номер файла в текст

template literals

const num = 1
const text = `filename${num}.jpg` // >> filename1.jpg

//урлы картинок
const imageUrls = [
'https://i.picsum.photos/id/171/1024/768.jpg?hmac=_yLLr6cdgtDdIuddjWGO9Ci3_Enwm8iXTNV28hMRa-w',
'https://i.picsum.photos/id/631/1024/768.jpg?hmac=CbtPkeaVNgggpvzg7x2YGt1cCpNWKFTekTO63lLeA7Y',
'https://i.picsum.photos/id/443/1024/768.jpg?hmac=ebj0EvQ5DDEaWX_8LbT1xpqNz-qpqem9d3DmOgsbXlc'
]

//Кешируем картинки, чтобы не было мерцаний при первом использовании.
const images = imageUrls.map(url => {
  const img = new Image()
  img.src = url
  return img
});

// с какого индекса начинаем перебор, index 0 уже установлен в CSS
let index = 1;

setInterval(()=>{
  document.body.style.backgroundImage = `url(${images[index].src})`
  index = index >= images.length-1 ? 0 : index + 1
}, 5000)
body {
  background: white no-repeat center cover fixed;
  background-image: url(https://picsum.photos/1024/768);
  background-size: cover;
  transition: 2s;
}

1
  • 1
    пока писал комент, что лучше мапнуть уж, тут уже изменилось) 17 авг 2021 в 13:35
1

Вариант с использованием css animation

body {
  background: white no-repeat center cover fixed;
  background-image: url(https://picsum.photos/1024/768);
  background-size: cover;
  transition: all .5s ease-in;
  animation: animBg 30s linear infinite;
}

@keyframes animBg {
  0%,
  32% {
    background-image: url('https://i.picsum.photos/id/171/1024/768.jpg?hmac=_yLLr6cdgtDdIuddjWGO9Ci3_Enwm8iXTNV28hMRa-w');
  }
  33%,
  66% {
    background-image: url('https://i.picsum.photos/id/631/1024/768.jpg?hmac=CbtPkeaVNgggpvzg7x2YGt1cCpNWKFTekTO63lLeA7Y');
  }
  67%,
  99% {
    background-image: url('https://i.picsum.photos/id/443/1024/768.jpg?hmac=ebj0EvQ5DDEaWX_8LbT1xpqNz-qpqem9d3DmOgsbXlc');
  }
  100% {
    background-image: url('https://i.picsum.photos/id/171/1024/768.jpg?hmac=_yLLr6cdgtDdIuddjWGO9Ci3_Enwm8iXTNV28hMRa-w');
  }
}

1
  • Я обратил внимание, что в мозиле картинки переключатся мгновенно. Есть ли возможность добится такого же плавного перехода как в хроме? 17 авг 2021 в 14:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.