0

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

例：6つの画像があり、「>」（次の矢印）をクリックすると次の背景画像に変更し、「<」（戻る矢印）をクリックすると前の背景画像に変更したい。

私はレスポンシブ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 
}

私が間違っていることは何ですか？

4

2 に答える 2

0

エラーは次の行にあるようです。

$('backgrounds')

これで正確に何を選択しようとしていますか？id = "backgrounds"のオブジェクトの場合は、$（'＃backgrounds'）を使用する必要があります。クラスの場合は、$（'。backgrounds'）を使用して選択できます。あなたが使用している方法では、jQueryは「backgrounds」という名前の要素（つまりタグ）を検索しようとしています。（私はあなたがやろうとしていることではないと確信しています）

とにかく、たとえば、body要素からbackground-imageを変更する場合は、次のようなものを使用する必要があります。

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

}

または、次を使用して、idがたまたま「backgrounds」である要素からbackground-imageを変更することもできます。

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

お役に立てば幸いです。乾杯

于 2012-10-26T20:06:36.333 に答える
0

このためのjQueryアプローチは以下のとおりです。

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

何を選択しようとしているのか完全にはわからないので、jsfiddleを作成しました。これにより、理解しやすくなります。

JSFiddle

于 2012-10-26T20:11:44.363 に答える