貓頭鷹輪播：如何根據窗口大小更改圖像？

Question

我有一個貓頭鷹旋轉木馬，我必須用它來宣傳一些活動。 每個事件有 3 個不同大小的圖像，基於用戶窗口屏幕尺寸。 當我第一次打開頁面時它工作正常，但是當我調整窗口大小時，不同大小的圖像沒有根據窗口大小調整顯示。 它始終是第一個圖像。

我不明白為什么。

我要顯示的圖像： 1Seventbanner.png（第一個事件，小圖） 1Meventbanner.png（第一個事件，中圖） 1Beventbanner.png（第一個事件，大圖） 2Seventbanner.png（第二個事件，小圖） 2Meventbanner.png （第二次活動，中等圖片）...

<div id="at-eventslider" class="at-eventbox owl-carousel">
<div class="item at-event">
    <span id="eventimg1" class="at-eventslide"></span>
</div>
<div class="item at-event">
    <span id="eventimg2" class="at-eventslide"></span>
</div>

function changeeventimage() {
var eventsnum = 2;  //num of events to display
var pagedimension = "M";   //Medium
//retrive the window dimension by checking some css property:
if ($(".at-megamenuimagearea").css('display') == 'block') {
    pagedimension = "B";  //Big
} else if ($(".at-category").css('min-height') == '240px') {
    pagedimension = "S";   //Small
};
// change the img:
for (let i = 1; i < eventsnum + 1; i++) {
    $('#eventimg' + i).css('background-image', 'url(frontend2022/assets/img/events/' + i + pagedimension + 'eventbanner.png)');
}};


$(function () {
changeeventimage();
$(window).resize(changeeventimage);
$('#at-eventslider').owlCarousel({
    items: 1,
    nav: true,
    loop: true,
    dots: false,
    autoplay: true,
});});

Answer 1

我不太了解 JQuery，所以我不知道到底出了什么問題，但是在使用常規 JS 時一切似乎都運行良好。

 for (let i = 1; i < eventsnum + 1; i++) { const el = document.getElementById("eventimg" + i); el.style.backgroundImage = 'url(https://iili.io/wc7' + pagedimension +'.png)'; }

編輯：

我看不出這個 JS 實現有什么問題，似乎它可能與您從 js 設置 unsafe-inline 樣式的事實有關，但我不確定。

無論如何，我建議您使用 css 媒體查詢非常簡單地解決您的問題，這似乎更合適，而且性能也會更高。

 #eventimg1, #eventimg2 { background-image: url(https://iili.io/wc7Win.png); } @media screen and (min-width: 1200px) { #eventimg1, #eventimg2 { background-image: url(https://iili.io/wc7Oml.png); } } @media screen and (max-width: 500px) { #eventimg1, #eventimg2 { background-image: url(https://iili.io/wc7Xgs.png); } }