更改背景图片 onClick答案

【问题标题】：change background image onClick更改背景图片 onClick
【发布时间】：2012-10-16 18:19:56
【问题描述】：

如何使用 jquery 或 java 脚本更改背景图像 onClick？

例如：我有六 (6) 张图像，我想在单击“>”（下一个箭头）时更改为下一个背景图像，并在单击“

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

【问题讨论】：

为什么不使用图像 jquery 幻灯片放映。看看这个。 21 Best jQuery Image Gallery
stackoverflow.com/questions/10867503/…

标签： javascript jquery html css responsive-design

【解决方案1】：

如果您不想使用任何其他 3rd 方库：

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

【讨论】：

【解决方案2】：

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

【讨论】：

你能给我一个css和html文件的例子吗？提前谢谢
@user1777158 我已更改示例以显示 HTML 的外观。当然，您可以更改元素及其相互之间的关系。也没有 css，我使用类来选择，但你也可以为它们定义样式。

【解决方案3】：

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

【讨论】：