更改背景图像onClick [英] change background image onClick

问题描述

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

How can I do to change background image onClick with jquery or java script?

例如：我有六（6）张图片，当我点击>（下一个箭头），并更改为上一个背景图片时，我点击< （返回箭头）。

For Example: I have Six(6) images and I want change to NEXT background image when i click on ">" (next arrow) and change to previous background image when I click on "<" (back arrow).

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

I'm developing this website with responsive html5 and css3.

推荐答案

您可以在数组中列出图片，然后点击更改background-image css属性：

You can list your images in an array and then change the background-image css attribute on click:

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>

这篇关于更改背景图像onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！