onClick更改背景图像

问题描述：

我该怎么做更改背景图像onClick与jQuery或Java脚本？我点击“>”（下一个箭头），当点击“<”（后退箭头）时切换到上一个背景图像，我想要改变为下一个背景图像。。onClick更改背景图像

我正在用响应html5和css3开发这个网站。

为什么不你使用图像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')");

答

您可以在阵列中列出您的图像，然后更改点击背景图像的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>

男人你得到了正确的答案！干杯！ – Heart

你能给我一个css和html文件的实验吗？ Thankx提前 – user1777158

@ user1777158我已经更改了示例以显示HTML的外观。当然，你可以改变元素及其与对方的关系。也没有CSS，我使用类来选择，但你也可以为这些定义样式。 –

答

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

onClick更改背景图像

相关推荐