我在 Java Script 的帮助下更改了我的背景图像，并且我同时拥有桌面版图像和移动版图像。
当屏幕尺寸减小到 600px 以下时，我希望我的桌面版图像应该替换为移动版图像。
有人可以帮我解决这个问题，下面是代码片段。
const hbg = document.querySelector('.hbg');
const closeBtn = document.querySelector('.close');
hbg.addEventListener('click', ()=>{
document.querySelector('.nav').parentNode.classList.add('active');
})
closeBtn.addEventListener('click',()=>{
document.querySelector('.nav').parentNode.classList.remove('active');
})
const data = [
{
image: "images/desktop-image-hero-1.jpg",
header: "Discover innovative ways to decorate",
},
{
image: "images/desktop-image-hero-2.jpg",
header: "We are available all across the globe",
},
{
image: "images/desktop-image-hero-3.jpg",
header: "Manufactured with the best materials",
}
]
let currentPage = 0;
const slide = () => {
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const page = document.querySelector('.main-page');
const header = document.querySelector('.header');
const updateContent = () => {
page.style.backgroundImage = `url(${data[currentPage].image})`;
header.innerHTML = data[currentPage].header;
}
next.addEventListener('click', () => {
currentPage++;
if(currentPage > data.length-1){
currentPage = 0;
}
updateContent();
})
prev.addEventListener('click', () => {
currentPage--;
if(currentPage < 0 ){
currentPage = data.length - 1;
}
updateContent();
})
};
slide();