更改背景图片onClick

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

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

我正在使用响应式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将是：

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)"); });