javascript - クリックで背景画像を変更

Question

jqueryまたはjavaスクリプトでonClickの背景画像を変更するにはどうすればよいですか?

例: 6 つの画像があり、">" (次の矢印) をクリックすると次の背景画像に変更し、"<" (戻る矢印) をクリックすると前の背景画像に変更します。

レスポンシブ html5 と css3 でこの Web サイトを開発しています。

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