jquery 및 html5로 클릭시 배경 이미지 변경

Question

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

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

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

<script type="text/javascript" src="jquery-1.8.2.min.js"></script> //jquery inside the folder ok 
<script type="text/javascript">           
var images = ['url("../images/1366x768/image-_0107.jpg")', 'url("../images/1366x768/image-_0012.jpg")'], curIndex = 0; // here I set the images inside the desired folder 

// Left arrow selector 
$('.backarrow').click(function() { //here I set the back arrow "<" 
    if (curIndex > 0) { 
     // Container selector 
     $('backgrounds').css('../images/1366x768/image-0061.jpg', images[--curIndex]); // here I set my file backgrounds.css and the default image configured there 
    } 
}); 

// Right arrow selector 
$('.nextarrow').click(function() { 
    if (curIndex < images.length - 1) { 
     // Container selector 
     $('backgrounds').css('../images/1366x768/image-0061.jpg', images[++curIndex]); 
    } 
}); 
</script> 

<!--HTML 5 --> 

<div id="square"><a href="" class="nextarrow">></a> <!-- here I call my jquery --> 
</div> 
<div id="square"><a href="" class="backarrow"><</a> <!-- here I call my jquery --> 
</div> 

/* CSS3 */ 

/* backgrounds.css */ 

body { 
    background: #dcd8d5 url(../images/1366x768/image-_0061.jpg) no-repeat center center fixed; -webkit-background-size: cover; 
-moz-background-size: cover; -o-background-size: cover; background-size: cover } 

/* default.css */ 

.nextarrow { 
    font-size:20px; color:#666; font-style:normal 
} 
.backarrow { 
    font-size:20px; color:#666; font-style:normal 
} 

내가 잘못 했습니까?

Answer 1

이의의 jQuery 방법은 다음과 같습니다 :

$("#background").css("background-image","url(img_url_here)"); 

당신이 파악하기 위해 내가 잘하면 쉽게 만들 것입니다 jsfiddle을했다 당신이 그렇게 선택하려고하는 것을 완전히 확실하지 않다 :

나는 기호를 클릭하면

JSFiddle

Answer 2

오류가이 줄 것 같다 :

$('backgrounds') 

정확히이 함께 선택하려고하는 어떤

? if가 id = "backgrounds"인 객체는 $ ('# backgrounds')를 사용해야하며, 클래스라면 $ ('. backgrounds')를 사용하여 선택할 수 있습니다. 사용하는 방식에 따라 jQuery는 "배경"이라는 요소 (즉 태그)를 검색하려고합니다.

: 당신의 신체 요소는 같은 것을 사용한다, 경우에 당신의 말을하자,에서 배경 이미지를 변경하려면, 어떤 방법을

(나는 확신 어떤 당신이 뭘 하려는지되지 않습니다)

$(document).ready(function() { 
    $(".nextarrow").click(function(){ 
    { 
     $('body').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path to your image 
    } 

} 

또는, ID 사용 "배경"될 일이 요소에서 배경 이미지를 변경할 수 있습니다

$('#backgrounds').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path relative to the html document this script is running. 

을 내가 도움이되기를 바랍니다. 건배