更改div的背景圖像ERROR

我想在9個不同圖像之間的循環中更改div的背景。我試圖使用我在這裏找到的代碼在stackoverflow，但出了問題... 我是新來的Java，所以我不能找到我的錯誤。更改div的背景圖像ERROR

我的CSS，我想改變IMG：

.ch-img-1 { 
    background-image: url(Images/round280/1.png) ; 
}

我的代碼：

<body> 
<ul class="ch-grid"> 
<li> 
    <div class="ch-item ch-img-1">    
    </div> 
</li> 
</ul> 

<script language="JavaScript"> 
    var currentBackground = 0; 
    var backgrounds = []; 
    backgrounds[0] = '/Images/round280/1.png'; 
    backgrounds[1] = '/Images/round280/2.png'; 
    backgrounds[2] = '/Images/round280/3.png'; 
    backgrounds[3] = '/Images/round280/4.png'; 
    backgrounds[4] = '/Images/round280/5.png'; 
    backgrounds[5] = '/Images/round280/6.png'; 
    backgrounds[6] = '/Images/round280/7.png'; 
    backgrounds[7] = '/Images/round280/8.png'; 
    backgrounds[8] = '/Images/round280/9.png'; 

function changeBackground() { 
    currentBackground++; 
    if(currentBackground > 2) currentBackground = 0; 

    $('ch-grid.ch-item.ch-img-1').fadeOut(100,function() { 
     $('ch-grid.ch-item.ch-img-1').css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $('ch-grid.ch-item.ch-img-1').fadeIn(100); 
    }); 


    setTimeout(changeBackground, 2000); 
} 

$(document).ready(function() { 
    setTimeout(changeBackground, 2000);   
}); 
</script> 

</body>

來源

2016-01-17 Max imal

你選擇的股利的方式是不正確的。 ch-grid是一個類，所以你需要使用'。'作爲前綴：.ch-grid將是選擇ul的正確方法。因爲您要選擇ul中包含的div，所以在父類（ch-grid）和子類（ch-item和ch-img-1）之間需要一個空格。一旦選擇是正確的，你可以使用$(this)

Fiddle Example

所以你更新的JQuery看起來像下面引用對象：

function changeBackground() { 
    currentBackground++; 
    if (currentBackground > 8) currentBackground = 0; 

    $('.ch-grid .ch-item.ch-img-1').fadeOut(100,function() { 
     var $this = $(this); 
     $this.css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $this.fadeIn(100); 
    }); 

    setTimeout(changeBackground, 2000); 
}

來源

2016-01-17 20:26:48 Yass

感謝。我可以把整個代碼放到一個test.js中，然後將它鏈接到我的html頭部，或者我可以以某種方式在我的html中包含js代碼？ –

Something works as I can see a fade effect but the empty is blank after the first change ... –

你也可以做。這完全取決於你。我會選擇第一個選項，因爲它會使內容更整潔，並且可以更新jquery而無需重新發布。 – Yass

更改div的背景圖像ERROR

回答

相關問題