백그라운드 이미지 변경 onClick

Question

jquery 또는 java 스크립트로 백그라운드 이미지 onClick을 변경하려면 어떻게해야합니까?

예 : 여섯 개의 이미지가 있고 ">"(다음 화살표)를 클릭하고 "<"(뒤로 화살표)을 클릭하면 이전 배경 이미지로 변경하면 다음 배경 이미지로 변경하고 싶습니다. .

나는이 웹 사이트를 반응 형 html5 및 css3으로 개발 중입니다.

Answer 1

당신은 다른 제 3의 라이브러리 사용하지 않을 경우 : 당신은 배열에 이미지를 표시 할 수 있습니다

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

Answer 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> 

Answer 3

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