onClick更改背景圖像

-1

我該怎麼做更改背景圖像onClick與jQuery或Java腳本？我點擊「>」（下一個箭頭），當點擊「<」（後退箭頭）時切換到上一個背景圖像，我想要改變爲下一個背景圖像。。onClick更改背景圖像

我正在用響應html5和css3開發這個網站。

2012-10-26 user1777158

爲什麼不你使用圖像jquery幻燈片show.have看看這個。 [21最佳jQuery圖片庫]（http://www.rswebsols.com/tutorials/jquery/21-best-jquery-image-gallery-photo-slideshow） –

http://stackoverflow.com/questions/10867503/ change-background-image-in-body – jrajav

如果你不希望使用任何其他第三方庫：

$("#YourElementId").css("background-image", "url('http://url.com/image1.jpg')");

來源

2012-10-26 13:24:32

您可以在陣列中列出您的圖像，然後更改點擊背景圖像的CSS屬性：

var images = ['url("image1.png")', ...], curIndex = 0; 

// Left arrow selector 
$('.left-arrow').click(function() { 
    if (curIndex > 0) { 
     // Container selector 
     $('#container').css('background-image', images[--curIndex]); 
    } 
}); 

// Right arrow selector 
$('.right-arrow').click(function() { 
    if (curIndex < images.length - 1) { 
     // Container selector 
     $('#container').css('background-image', images[++curIndex]); 
    } 
});

HTML是：

<div id="container"> 
    <img class="left-arrow" src="image-path" /> 
    <img class="right-arrow" src="image-path" /> 
<div>

來源

2012-10-26 13:25:55

男人你得到了正確的答案！乾杯！ – Heart

你能給我一個css和html文件的實驗嗎？ Thankx提前 – user1777158

@ user1777158我已經更改了示例以顯示HTML的外觀。當然，你可以改變元素及其與對方的關係。也沒有CSS，我使用類來選擇，但你也可以爲這些定義樣式。 –

$("#id").on("click", function() { 
    $(this).css("background-image", "url(/url/to/background/image.jpg)"); 
});

來源

2012-10-26 13:26:24 chridam

onClick更改背景圖像

回答

相關問題