jquery無法更改background-image屬性

就像標題所說，由於某種原因，我的功能不想對background-image屬性執行更改。我還將該功能更改爲background-color，以檢查它是否正常工作。所以看起來問題不在語法中。jquery無法更改background-image屬性

function feedSlide() { 
 
    var x = [ 
 
    '../img/feed1.png', 
 
    '../img/feed2.png', 
 
    '../img/feed3.png', 
 
    '../img/feed4.png' 
 
    ]; 
 
    var y = ['green', 'red', 'blue', 'yellow']; 
 
    for (var i = 0; i < x.length; i++) { 
 
    setTimeout(function(z) { return function() { 
 
     console.log(x[z]); 
 
     $('#feedback').css({"background-image" : "url(" + x[z] + ")"}); 
 
     $('#feedback').css({"background-color" : y[z] }); 
 
    }; }(i), 1000*i); 
 
    } 
 
}

#feedback { 
 
    width: 400px; 
 
    text-align: justify; 
 
    padding: 10px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="aboutDiv"> 
 
    <div id="feedback"></div> 
 
    <div id="audio"></div> 
 
</div>

我現在上了好幾個小時，一切都似乎是變化的，但background-image。任何信息都非常受歡迎。

來源

2017-07-07 Raphi

背景圖像添加 - > https://jsfiddle.net/a2schxaj/是圖像位置是否正確？ – Morpheus

您需要實際調用您的'feedSlide'函數。這可以通過向你的js添加'$（feedSlide）;'來完成。 – Olian04

檢查瀏覽器的網絡選項卡是否爲404s –

在每次嘗試解決此問題失敗後，我在CSS動畫中找到了解決方案。

#feedback { 
    height: 110px; 
    width: 380px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    animation-name: feedSlide; 
    animation-duration: 40s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 

@keyframes feedSlide { 
0.00% {background-image: url(../img/feed1.png); opacity: 0;} 
3% {opacity: 1;} 
22% {opacity: 1;} 
25% {background-image: url(../img/feed1.png); opacity: 0;} 
26% {background-image: url(../img/feed2.png); opacity: 0;} 
29% {opacity: 1;} 
47% {opacity: 1;} 
50% {background-image: url(../img/feed2.png); opacity: 0;} 
51% {background-image: url(../img/feed3.png); opacity: 0;} 
54% {opacity: 1;} 
72% {opacity: 1;} 
75% {background-image: url(../img/feed3.png); opacity: 0;} 
76% {background-image: url(../img/feed4.png); opacity: 0;} 
79% {opacity: 1;} 
97% {opacity: 1;} 
100% {background-image: url(../img/feed4.png); opacity: 0;} 
}

來源

2017-07-08 16:41:20 Raphi

你可以試試下面的代碼，

function feedSlide() { 
    var x = [ 
    'feed1.png', 
    'feed2.png', 
    'feed3.png', 
    'feed4.png' 
    ]; 
    var y = ['green', 'red', 'blue', 'yellow']; 
    for (var i = 0; i < x.length; i++) { 
    setTimeout(function(z) { return function() { 
     console.log(x[z]); 
     var element = document.getElementById('#feedback'); 
     element.style.backgroundImage = "url('img/" + x[z] + "')"; 
     element.style.backgroundColor = y[z]; 
    }; }(i), 1000*i); 
    } 
}

來源

2017-07-08 17:02:11

jquery無法更改background-image屬性

回答

相關問題