有人能幫我編碼這個嗎？當我點擊右箭頭時，我想將大圖切換到當前圖片的右側。左箭頭也一樣。我使用背景圖片是因為我想使用大圖的分辨率。我嘗試過使用YouTube教程中的JS和CSS，但是到目前為止都沒有效果。

我更喜歡JavaScript，但CSS對我來說也不錯。

下面是我用于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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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);
}

要在單擊右箭頭時將大圖片切換到當前圖片的右側，反之亦然，您可以使用JavaScript來操作CSS背景圖像屬性。下面是一個如何實現這一點的示例:

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)的背景圖像屬性，并跟蹤當前圖像索引。當點擊箭頭按鈕時，導航功能被調用，并相應地更新當前索引，然后相應地改變背景圖像。

確保鏈接CSS文件(style.css ),并將JavaScript代碼包含在HTML文件的標記中或鏈接到HTML的外部JavaScript文件中。