Question

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

例如：我有六（6）张图像，当我点击“＆gt;”时我想要更改为NEXT背景图像（下一个箭头）当我点击“＆lt;”时更改为上一个背景图像（后箭头）。

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

Answer 1

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

Answer 2

如果您不想使用任何其他第三方库：

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

Answer 3

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

更改背景图片onClick

3 个答案: