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 正在尝试搜索名为“背景”的元素（即标签）。（我很确定这不是你想要做的）

无论如何，如果你想改变背景图像，比如说，你的身体元素，你应该使用类似的东西：

$(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.

我希望它有所帮助。干杯

于 2012-10-26T20:06:36.333 回答
0

jQuery 方法如下：

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

我不完全确定您要选择什么，所以我制作了一个 jsfiddle，希望能让您更容易弄清楚：

JSFiddle

于 2012-10-26T20:11:44.363 回答