英文:
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("/ansmet\ item\ 2.jpg");
}
.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文件中的
评论