如何通过单击另一张图片或div来更改div的背景图片？

huangapple
go评论65阅读模式
英文:

How to change a div's background image by clicking another image or div?

问题

Here is the translated content:

[![点击查看大图](https://i.stack.imgur.com/hoQ8T.png)](https://i.stack.imgur.com/hoQ8T.png)

有人可以帮我编写这个代码吗？我想在单击右箭头时将大图切换为当前图片的右侧，左箭头也是一样。由于我想要使用的大图的分辨率，我正在使用背景图片。我尝试过使用YouTube教程中的JS和CSS，但到目前为止都没有成功。

我更喜欢使用JavaScript，但CSS对我也可以。

以下是我用于HTML的代码：

```

CSS

.foto_1{
    position: absolute;
    width: 437px;
    height: 484.5px;
    background: pink; /* 仅用于演示 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 65px;
    top: 107px;
    transition: transform .2s;
    border-radius: 2px;
    background-image: url("/ansmet\ item\ 2.jpg");
}

.small1{
    box-sizing: border-box;
    background: pink; /* 仅用于演示 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 99px;
    height: 120px;
    left: 65px;
    top: 613px;
    border: 1px solid #000000;
    border-radius: 2px;
}

.small2{
    box-sizing: border-box;
    background: pink; /* 仅用于演示 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 99px;
    height: 120px;
    left: 180px;
    top: 613px;
    border-radius: 2px;
}

.small3{
    box-sizing: border-box;
    background: pink; /* 仅用于演示 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 99px;
    height: 120px;
    left: 295px;
    top: 613px;
    border-radius: 2px;
}

.small4{
    box-sizing: border-box;
    background: pink; /* 仅用于演示 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 99px;
    height: 120px;
    left: 410px;
    top: 613px;
    border-radius: 2px;
}

.right_arr{
    position: absolute;
    width: 30.17px;
    height: 30px;
    left: 517px;
    top: 338.17px;
    cursor: pointer;
}

.left_arr{
    position: absolute;
    width: 30.17px;
    height: 30px;
    left: 20px;
    top: 338.17px;
    cursor: pointer;
    transform: rotate(-180deg);
}


Please note that the code remains in its original format, and I have only translated the text portions.
<details>
<summary>英文:</summary>
[![enter image description here](https://i.stack.imgur.com/hoQ8T.png)](https://i.stack.imgur.com/hoQ8T.png)
Can anyone help me to code this? I wanted to switch the big picture with the right-side of the current picture when I click on the right arrow. Same goes for the left arrow. I am using background image because of the resolution I want to use for the big picture. I have tried using JS and CSS from YouTube tutorials, but nothing worked so far.
I prefer with JavaScript, but CSS is fine for me.
Here is the code I use for HTML.

<div class="right_arr"><img src="/right-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>
<div class="left_arr"><img src="/right-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>

<div class="foto_1" id="foto_1"></div>
<div class="small1" style="background-image: url(/ansmet\ item\ 2.jpg);"></div>
<div class="small2" style="background-image: url(/facebook.png);"></div>
<div class="small3" style="background-image: url(/apple.png);"></div>
<div class="small4" style="background-image: url(/shopping-cart.png);"></div>
</div>


CSS

.foto_1{
position: absolute;

width: 437px;
height: 484.5px;
background:pink; /* just for demo */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
left: 65px;
top: 107px;
transition: transform .2s;
border-radius: 2px;
background-image: url(&quot;/ansmet\ item\ 2.jpg&quot;);

}

.small1{
box-sizing: border-box;

background:pink; /* just for demo */
background-size: cover;
background-position: center;
background-repeat: no-repeat;

position: absolute;
width: 99px;
height: 120px;
left: 65px;
top: 613px;

border: 1px solid #000000;
border-radius: 2px;
}

.small2{
box-sizing: border-box;

background:pink; /* just for demo */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
width: 99px;
height: 120px;
left: 180px;
top: 613px;
border-radius: 2px;

}

.small3{
box-sizing: border-box;

background:pink; /* just for demo */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
width: 99px;
height: 120px;
left: 295px;
top: 613px;
border-radius: 2px;

}

.small4{
box-sizing: border-box;

background:pink; /* just for demo */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
width: 99px;
height: 120px;
left: 410px;
top: 613px;
border-radius: 2px;

}

.right_arr{
position: absolute;
width: 30.17px;
height: 30px;
left: 517px;
top: 338.17px;

cursor: pointer;

}

.left_arr{
position: absolute;
width: 30.17px;
height: 30px;
left: 20px;
top: 338.17px;

cursor: pointer;
transform: rotate(-180deg);

}


</details>
# 答案1
**得分**: -1
要实现在单击右箭头时将当前图片的大图切换为右侧的图像，左箭头则相反，您可以使用JavaScript来操作CSS的background-image属性。以下是如何实现的示例：
HTML：
``` html
<div class="right_arr" onclick="navigate('right')"><img src="/right-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>
<div class="left_arr" onclick="navigate('left')"><img src="/left-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>
<div class="foto_1" id="foto_1"></div>
<div class="small1" onclick="changeImage('/ansmet item 2.jpg')"></div>
<div class="small2" onclick="changeImage('/facebook.png')"></div>
<div class="small3" onclick="changeImage('/apple.png')"></div>
<div class="small4" onclick="changeImage('/shopping-cart.png')"></div>

.foto_1 {
  position: absolute;
  width: 437px;
  height: 484.5px;
  background: pink;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  left: 65px;
  top: 107px;
  transition: transform .2s;
  border-radius: 2px;
}

.small1, .small2, .small3, .small4 {
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  width: 99px;
  height: 120px;
  border: 1px solid #000000;
  border-radius: 2px;
}

.small1 {
  left: 65px;
  top: 613px;
}

.small2 {
  left: 180px;
  top: 613px;
}

.small3 {
  left: 295px;
  top: 613px;
}

.small4 {
  left: 410px;
  top: 613px;
}

.right_arr, .left_arr {
  position: absolute;
  width: 30.17px;
  height: 30px;
  cursor: pointer;
}

.right_arr {
  left: 517px;
  top: 338.17px;
}

.left_arr {
  left: 20px;
  top: 338.17px;
  transform: rotate(-180deg);
}

let currentIndex = 0;
const imageUrls = [
  '/ansmet item 2.jpg',
  '/facebook.png',
  '/apple.png',
  '/shopping-cart.png'
];

function changeImage(imageUrl) {
  const foto1 = document.getElementById('foto_1');
  foto1.style.backgroundImage = `url(${imageUrl})`;
  currentIndex = imageUrls.indexOf(imageUrl);
}

function navigate(direction) {
  if (direction === 'right') {
    currentIndex = (currentIndex + 1) % imageUrls.length;
  } else if (direction === 'left') {
    currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;
  }

  const imageUrl = imageUrls[currentIndex];
  const foto1 = document.getElementById('foto_1');
  foto1.style.backgroundImage = `url(${imageUrl})`;
}

在这段代码中，JavaScript函数changeImage和navigate用于处理图像更改。changeImage函数更新大图（foto_1）的background-image属性，并跟踪当前图像的索引。当单击箭头按钮时，将调用navigate函数，根据单击的方向更新当前索引，然后相应地更改背景图像。

确保链接CSS文件（style.css）并将JavaScript代码包括在HTML文件中的 :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定