请将上述代码在页面中实现以下功能，只用写js的内容。 1.页面加载完成时 a)商品属性中默认选中颜色一一“星际黑” b)清空页面左侧产品图片列表，并加载jSon数据中对应的“星际黑”所有产品图片c)左侧上方大图默认显示第一张产品图片 2.点击不同颜色选项(星际黑、德光金) 时 a)商品属性中选中当前颜色选项，其余选项恢复正常 b)清空页面左侧产品图片列表，并加载jSon数据中对应颜色的所有产品图片c)左侧上方大图默认显示第一张产品图片点击不同商品版本选项时:3 a)更新商品名称 b)更新商品价格 4.点击商品图片列表两端向左、向右切换按钮时: a)产品列表分别向左、向右滑动4张图片 b)当前已是最前面4张图片时，向左按钮禁用 c)当前已是最后4张图片时，向右按钮禁用; 5.点击商品图片列表中缩略图时，上方显示该图片大图 6.点击商品数量左右“+”和“-”按钮时: a)商品数量可增加/减少1 b)增加时商品数量不能高于10 c)减少时商品数量不能低于1

以下是实现以上功能的JavaScript代码：

window.addEventListener('DOMContentLoaded', function() {
  // 1a) 默认选中颜色为“星际黑”
  document.getElementById('color-star-black').checked = true;

  // 1b) 加载“星际黑”对应的产品图片
  loadProductImages('星际黑');

  // 1c) 默认显示第一张产品图片
  showProductImage(0);

  // 监听颜色选项的点击事件
  var colorOptions = document.getElementsByClassName('color-option');
  for (var i = 0; i < colorOptions.length; i++) {
    colorOptions[i].addEventListener('click', function() {
      // 2a) 更新选中的颜色选项
      updateSelectedColorOption(this);

      // 2b) 加载对应颜色的产品图片
      loadProductImages(this.dataset.color);

      // 2c) 默认显示第一张产品图片
      showProductImage(0);
    });
  }

  // 监听商品版本选项的点击事件
  var versionOptions = document.getElementsByClassName('version-option');
  for (var i = 0; i < versionOptions.length; i++) {
    versionOptions[i].addEventListener('click', function() {
      // 3a) 更新商品名称
      updateProductName(this.dataset.name);

      // 3b) 更新商品价格
      updateProductPrice(this.dataset.price);
    });
  }

  // 监听切换按钮的点击事件
  var prevButton = document.getElementById('prev-button');
  var nextButton = document.getElementById('next-button');
  prevButton.addEventListener('click', function() {
    slideProductImages('left');
  });
  nextButton.addEventListener('click', function() {
    slideProductImages('right');
  });

  // 监听缩略图的点击事件
  var thumbnailImages = document.getElementsByClassName('thumbnail-image');
  for (var i = 0; i < thumbnailImages.length; i++) {
    thumbnailImages[i].addEventListener('click', function() {
      var imageIndex = Array.prototype.indexOf.call(thumbnailImages, this);
      showProductImage(imageIndex);
    });
  }

  // 监听数量按钮的点击事件
  var quantityMinusButton = document.getElementById('quantity-minus');
  var quantityPlusButton = document.getElementById('quantity-plus');
  var quantityInput = document.getElementById('quantity-input');
  quantityMinusButton.addEventListener('click', function() {
    updateQuantity(-1);
  });
  quantityPlusButton.addEventListener('click', function() {
    updateQuantity(1);
  });

  function loadProductImages(color) {
    // 清空产品图片列表
    var productImagesContainer = document.getElementById('product-images-container');
    productImagesContainer.innerHTML = '';

    // 加载对应颜色的产品图片
    for (var i = 0; i < jsonData.length; i++) {
      if (jsonData[i].color === color) {
        var imageElement = document.createElement('img');
        imageElement.src = jsonData[i].image;
        imageElement.alt = jsonData[i].name;
        productImagesContainer.appendChild(imageElement);
      }
    }
  }

  function showProductImage(index) {
    // 更新大图显示
    var productImage = document.getElementById('product-image');
    productImage.src = productImagesContainer.children[index].src;

    // 更新缩略图选中状态
    for (var i = 0; i < thumbnailImages.length; i++) {
      thumbnailImages[i].classList.remove('selected');
    }
    thumbnailImages[index].classList.add('selected');
  }

  function updateSelectedColorOption(option) {
    // 更新选中的颜色选项
    var colorOptions = document.getElementsByClassName('color-option');
    for (var i = 0; i < colorOptions.length; i++) {
      colorOptions[i].classList.remove('selected');
    }
    option.classList.add('selected');
  }

  function updateProductName(name) {
    // 更新商品名称
    var productName = document.getElementById('product-name');
    productName.textContent = name;
  }

  function updateProductPrice(price) {
    // 更新商品价格
    var productPrice = document.getElementById('product-price');
    productPrice.textContent = price;
  }

  function slideProductImages(direction) {
    var productImagesContainer = document.getElementById('product-images-container');
    var scrollAmount = 400; // 每次滑动的距离

    if (direction === 'left') {
      productImagesContainer.scrollLeft -= scrollAmount;
    } else if (direction === 'right') {
      productImagesContainer.scrollLeft += scrollAmount;
    }

    // 判断是否禁用切换按钮
    prevButton.disabled = (productImagesContainer.scrollLeft === 0);
    nextButton.disabled = (productImagesContainer.scrollLeft >= productImagesContainer.scrollWidth - productImagesContainer.clientWidth);
  }

  function updateQuantity(amount) {
    var currentQuantity = parseInt(quantityInput.value);
    var newQuantity = currentQuantity + amount;

    // 判断增加时数量是否超过限制
    if (amount > 0 && newQuantity > 10) {
      return;
    }

    // 判断减少时数量是否低于限制
    if (amount < 0 && newQuantity < 1) {
      return;
    }

    quantityInput.value = newQuantity;
  }
});

请将以上代码添加到页面中的`<script>`标签内，确保在页面加载完成时执行。并根据具体情况修改相关的HTML元素id和class名称，以及JSON数据的结构。