JavaScript動態更改CSS背景樣式

我試圖通過不斷循環圖像路徑數組來動態更改背景圖像。如果我將輸出記錄到控制檯，代碼就可以工作，但我無法讓圖像真正改變。JavaScript動態更改CSS背景樣式

原始CSS：（我會覆蓋另一個CSS文件的默認樣式）

<style> 
     .jumbotron { 
     background: #7da7d8 url('images/rotunda2.jpg') no-repeat center center !important; 
     } 
</style>

的JavaScript：

$(document).ready(function() { 

var count = -1; 
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 
setInterval(swap, 5000); 

function swap(){ 
    $('.jumbotron').css("background", "#7da7d8 url('"+images[++count % images.length]+"') no-repeat center center !important"); 
    console.log(images[++count % images.length]); 
} 

});

任何想法？

來源

2014-02-19 littleK

第一猜測是將圖像的相對路徑是否正確解析。 –

有演示？或鏈接？反正你不應該檢查條件爲if（count> images.length）{count == - 1;}或clearInterval如果不是循環？ –

我沒有看到任何重置計數的東西，似乎它會永遠增加。另外，爲什麼你必須使用2個不同的類名？ myelement和jumbotron？ – aiiwa

我不認爲改變CSS是一個好主意，你可以定義一些類，並動態地改變元素上的類！

HTML：

<div class="dynamicBg class1"></div> 
<div class="dynamicBg class1"></div>

CSS：

.dynamicBg { 
    background-color: #7da7d8; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.class1 { 
    background-image: url('images/image1.jpg'); 
} 
.class2 { 
    background-image: url('images/rotunda2.jpg'); 
} 
.class3 { 
    background-image: url('images/rotunda3.jpg'); 
} 
.class4 { 
    background-image: url('images/rotunda4.jpg'); 
}

JS：

$(function() { 
    var classStr = 'class1 class2 class3 class4', 
     classArr = classStr.split(' '), i = 0, 
     $dynamicBg = $('.dynamicBg'); 
    setInterval(function() { 
     i = i > 3 ? 0 : i + 1; 
     $dynamicBg.removeClass(classStr).addClass(classArr[i]); 
    }, 5000); 
});

來源

2014-02-19 02:32:44 jingyinggong

好主意，謝謝！ – littleK

等待文件加載：

$(document).load(function() 
{ 
    var count = -1; 
    var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 
    setInterval(swap, 5000); 

    function swap(){ 
     $('.jumbotron').css("background", "#7da7d8 url("+images[++count % images.length]+") no-repeat center center !important"); 
     console.log(images[++count % images.length]); 
    } 
});

來源

2014-02-19 01:55:12 Cilan

你交換功能似乎有點古怪。通常對於這樣的事情，你可以有一個計數器增加，然後重置爲0並重新開始。還要確保你在一個onload事件處理器上下文中運行。

var count = 0; 
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 

function swap(){ 
    //get the next image 
    var nextImage = images[count]; 
    console.log(nextImage); 

    $('.jumbotron').css("background-image", nextImage); 

    //increment count 
    count = count > images.length - 1 ? 0 : count+=1; 
} 

$(document).ready(function(){ 
    setInterval(swap, 5000); 
});

從

不談，一定要檢查你的錯誤控制檯的錯誤，和404的指示，你可能有不好的圖像路徑

來源

2014-02-19 01:57:13 thescientist

試試這個：

$(document).load(function() { 
    var count = -1; 
    var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg']; 
    setInterval(swap, 5000); 

    function swap() { 
     var img = images[++count % images.length]; 

     $('.jumbotron').css('background', '#7da7d8 url(' + img + ') no-repeat center center !important'); 
     console.log(img); 
    } 
});

來源

2014-02-19 02:01:34 ducdhm

JavaScript動態更改CSS背景樣式

回答

相關問題