如何使用 jquery 或 java 脚本更改 onClick 的背景图像?
例如:我有六 (6) 张图像,我想在单击“>”(下一个箭头)时更改为下一个背景图像,在单击“<”(后退箭头)时更改为上一个背景图像。
我正在使用响应式 html5 和 css3 开发这个网站。
最佳答案
您可以在数组中列出您的图像,然后在单击时更改背景图像 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>
关于javascript - 单击时更改背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13087684/