文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >沙箱中的沙箱模态

问沙箱中的沙箱模态
EN

Stack Overflow用户
提问于 2022-06-23 09:36:57
回答 2查看 84关注 0票数 0

快速注释：，这是一个我想说的项目(在0到100的范围内)，我在92岁就完成了。所以没有必要对整个代码进行处理。(如果需要的话，你可以这么做。)

我可以称之为:一个图像滑块，一个图片库，一个静态滑块，一个静态旋转木马，或者一个静态图像滑块旋转木马库(不管这意味着什么)。

只是觉得图像沙箱可以节省一些命名压力。

我目前是一个小团队的一部分，开发一个非常需要这个组件的网站。(就像我之前说的，我快完成了，只是需要帮助才能完成。)

-那是什么？

我做了两个沙箱，默认情况下一个是可见的，另一个是隐藏的。第一台有主显示器，显示缩略图悬停在上面。当您单击主显示器时，它会显示一个有另一个沙箱的模式(与默认的沙箱大不相同)。

当前，当我单击第一个沙箱的显示图像时，模式的主显示在第一个沙箱中显示一个不同的图像，而不是我单击的最后一个图像。

-你想要什么？

我希望在第一个沙箱的主显示器上活动的图像在单击它时自动显示为模式的主显示中的默认图像。

也就是说，在单击第一个沙箱的主显示后，是视图中的最后一个图像，在单击它之前，应该是模式主显示器上的默认显示，也是默认的。当然，相应的缩略图应该是活动的。

看看我写的代码：

​

代码语言：javascript
复制
/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById('featured')
let modal = document.getElementById('sandbox_modal')

modalBtn.addEventListener('click', () => {
  modal.classList.add('sandbox_modal_on')
})

window.onclick = (e) => {
  if (e.target.matches('#sandbox_modal')) {
    modal.classList.remove('sandbox_modal_on')
  }
}
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')

for (var i = thumbnails.length - 1; i >= 0; i--) {
  let thumbnail = thumbnails[i]

  thumbnail.addEventListener('mouseenter', function() {
    if (activeImages.length > 0) {
      activeImages[0].classList.remove('active')
    }

    this.classList.add('active')
    document.getElementById('featured').src = this.src
  })
}

/* eventListener to run the script at the start and hdie left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll('#slider .thumbnail').length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;

let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

let container = document.getElementById('slider')

buttonLeft.addEventListener('click', function() {
  container.scrollLeft -= 70;

  if (currentSlideCounter > 1) {
    currentSlideCounter -= 1;
  }
  change();
})

buttonRight.addEventListener('click', function() {
  container.scrollLeft += 70;

  if (currentSlideCounter < maxSlideCounter) {
    currentSlideCounter += 1;
  }
  change();
})

function change() {
  switch (currentSlideCounter) {
    case 1:
      document.querySelector('#slide_left').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_right').classList.remove('changes');
      }
      break;

    case maxSlideCounter:
      document.querySelector('#slide_right').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_left').classList.remove('changes');
      }
      break;

    default:
      document.querySelectorAll('.slide_arrow').forEach(el => el.classList.remove('changes'));
      break;
  }
  /* this fixes the issue you addressed */
  if (slidesAmount <= slidesPerScreen) {
    document.querySelectorAll('.slide_arrow').forEach(el => el.classList.add('changes'));
  }
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (MODAL) ========== begin ========== */
let leftArrow = document.querySelector("#img_slide_left");
let rightArrow = document.querySelector("#img_slide_right");
let slidesContainer = document.querySelector("#img_slides");

let applyThumbnail = function(dataIdx) {
  document.querySelector("#img_thumbnails > img.active").classList.remove("active");
  document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};

let thumbnailClick = function(dataIdx) {
  document.querySelector("#img_thumbnails > img.active").classList.remove("active");
  document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
  document.querySelector(`#img_slides > img.active`).classList.remove("active");
  document.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};

leftArrow.addEventListener("click", function() {
  const currentActive = document.querySelector("#img_slides > img.active");
  const prevSibling = currentActive.previousElementSibling;

  currentActive.classList.remove("active");

  if (prevSibling) {
    // Select Prev Image
    prevSibling.classList.add("active");
    applyThumbnail(prevSibling.getAttribute("data-index"));
  } else {
    // Select Last Image
    const last = document.querySelector("#img_slides > :last-child");
    last.classList.add("active");
    applyThumbnail(last.getAttribute("data-index"));
  }
});

rightArrow.addEventListener("click", function() {
  const currentActive = document.querySelector("#img_slides > img.active");
  const nextSibling = currentActive.nextElementSibling;

  currentActive.classList.remove("active");

  if (nextSibling) {
    // Select Next Image
    nextSibling.classList.add("active");
    applyThumbnail(nextSibling.getAttribute("data-index"));
  } else {
    // Select First Image
    const first = document.querySelector("#img_slides > :first-child");
    first.classList.add("active");
    applyThumbnail(first.getAttribute("data-index"));
  }
});

document.querySelectorAll(".imgThumbnail").forEach(function(elem) {
  elem.addEventListener("click", function() {
    thumbnailClick(this.getAttribute("data-index"));
  });
});
/* ========== end ========== IMAGE SANDBOX SCRIPT (MODAL) ========== end ========== */
代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #bbbbbb;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: "Helvetica";
}


/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */

div#sandbox_modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000d;
  display: grid;
  /*align-items: center;*/
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity visibility;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

div#sandbox_modal.sandbox_modal_on {
  opacity: 1;
  visibility: visible;
}

div#sandbox_modal div#sandbox_modal_body {
  height: 100%;
  width: fit-content;
  background-color: #ddddddcc;
  display: grid;
  align-items: center;
}


/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */

div#product_img_bx {}

img#featured {
  width: 400px;
  height: 250px;
  cursor: zoom-in;
  border: 2px solid #ffffff;
}

div#slide_wrapper {
  width: inherit;
  display: flex;
  justify-content: space-between;
  height: fit-content;
  margin-top: 10px;
}

div#slider {
  width: 270px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
  /*background-color: #444444;*/
}

img.thumbnail {
  min-width: 60px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid #ffffff;
}

img.thumbnail:not(:last-child) {
  margin-right: 10px;
}

img.thumbnail:hover,
img.thumbnail.active {
  opacity: 1;
}

div#slide_wrapper>div.slide_arrow {
  height: 30px;
  width: 30px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000;
  font-size: 15px;
  border-radius: 50%;
}

div#slide_wrapper>div.slide_arrow:hover {
  cursor: pointer;
}


/* this CSS line applies changes with the JS script */

div.slide_arrow.changes {
  visibility: hidden;
}


/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */

div#img_slides_wrapper {
  width: 400px;
  height: 250px;
  display: flex;
  border: 2px solid #efefef;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

div#img_slides_wrapper div#img_slides {
  overflow: hidden;
  display: flex;
  background-color: #0ff3;
}

img.imgSlide {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: opacity;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

img.imgSlide.active {
  opacity: 1;
}

img.imgThumbnail {
  width: 50px;
}

div.img_slide_arrow {
  color: transparent;
  height: inherit;
  width: 40px;
  position: absolute;
  z-index: 2;
}

div.img_slide_arrow:hover {
  cursor: pointer;
}

div.img_slide_arrow:hover>span {
  font-size: 20px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: #00000033;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.img_slide_arrow#img_slide_right {
  right: 0;
}

div.img_slide_arrow#img_slide_left span {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

div.img_slide_arrow#img_slide_right span {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: 0;
}

div#img_thumbnails {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div#img_thumbnails img.imgThumbnail {
  background-color: #888;
  margin: 5px;
}

div#img_thumbnails img.imgThumbnail:hover {
  cursor: pointer;
}

div#img_thumbnails img.imgThumbnail.active {
  border: 2px solid #0ff;
}


/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */
代码语言：javascript
复制
<!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
<div id="product_img_bx">
  <img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" id="featured" />

  <div id="slide_wrapper">
    <div id="slide_left" class="slide_arrow"><span>&#10094;</span></div>
    <div id="slider">
      <img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail active" />
      <img src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
    </div>
    <div id="slide_right" class="slide_arrow"><span>&#10095;</span></div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->

<!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
<div id="sandbox_modal">
  <div id="sandbox_modal_body">
    <div id="main_wrapper">
      <div id="img_slides_wrapper">
        <div id="img_slide_left" class="img_slide_arrow"><span>&#10094;</span></div>
        <div id="img_slides">
          <img data-index="0" class="imgSlide active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="1" class="imgSlide" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="2" class="imgSlide" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="3" class="imgSlide" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="4" class="imgSlide" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="5" class="imgSlide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="6" class="imgSlide" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="7" class="imgSlide" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        </div>
        <div id="img_slide_right" class="img_slide_arrow"><span>&#10095;</span></div>
      </div>

      <div id="img_thumbnails">
        <img data-index="0" class="imgThumbnail active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="1" class="imgThumbnail" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="2" class="imgThumbnail" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="3" class="imgThumbnail" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="4" class="imgThumbnail" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="5" class="imgThumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="6" class="imgThumbnail" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="7" class="imgThumbnail" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      </div>
    </div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

​

如果有人能帮我的话我会很感激的。

javascript
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-06-23 15:44:54

HTML中的data-index由//init部分在javascript中删除和生成。

我的javascript很乱。但是如果它能工作，它就能工作。

​

代码语言：javascript
复制
/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById("featured");
let modal = document.getElementById("sandbox_modal");

modalBtn.addEventListener("click", function () {
  var idx = this.getAttribute("data-index");
  modal.classList.add("sandbox_modal_on");
  document.querySelector(`#img_slides > .active`).classList.remove("active");
  document
    .querySelector(`#img_slides > :nth-child(${idx})`)
    .classList.add("active");
  document.querySelector(".imgThumbnail.active")?.classList.remove("active");
  document
    .querySelector(`#img_thumbnails > :nth-child(${idx})`)
    .classList.add("active");
});

window.onclick = (e) => {
  if (e.target.matches("#sandbox_modal")) {
    modal.classList.remove("sandbox_modal_on");
  }
};
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName("thumbnail");
let activeImages = document.getElementsByClassName("active");

for (var i = thumbnails.length - 1; i >= 0; i--) {
  let thumbnail = thumbnails[i];

  thumbnail.addEventListener("mouseenter", function () {
    if (activeImages.length > 0) {
      activeImages[0].classList.remove("active");
    }

    this.classList.add("active");
    document.getElementById("featured").src = this.src;
    document
      .getElementById("featured")
      .setAttribute("data-index", this.getAttribute("data-index"));
  });
}

/* eventListener to run the script at the start and hdie left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll("#slider .thumbnail").length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;

let buttonLeft = document.getElementById("slide_left");
let buttonRight = document.getElementById("slide_right");

let container = document.getElementById("slider");

buttonLeft.addEventListener("click", function () {
  container.scrollLeft -= 70;

  if (currentSlideCounter > 1) {
    currentSlideCounter -= 1;
  }
  change();
});

buttonRight.addEventListener("click", function () {
  container.scrollLeft += 70;

  if (currentSlideCounter < maxSlideCounter) {
    currentSlideCounter += 1;
  }
  change();
});

function change() {
  switch (currentSlideCounter) {
    case 1:
      document.querySelector("#slide_left").classList.add("changes");
      if (maxSlideCounter == 2) {
        document.querySelector("#slide_right").classList.remove("changes");
      }
      break;

    case maxSlideCounter:
      document.querySelector("#slide_right").classList.add("changes");
      if (maxSlideCounter == 2) {
        document.querySelector("#slide_left").classList.remove("changes");
      }
      break;

    default:
      document
        .querySelectorAll(".slide_arrow")
        .forEach((el) => el.classList.remove("changes"));
      break;
  }
  /* this fixes the issue you addressed */
  if (slidesAmount <= slidesPerScreen) {
    document
      .querySelectorAll(".slide_arrow")
      .forEach((el) => el.classList.add("changes"));
  }
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (MODAL) ========== begin ========== */
let leftArrow = document.querySelector("#img_slide_left");
let rightArrow = document.querySelector("#img_slide_right");
let slidesContainer = document.querySelector("#img_slides");

let applyThumbnail = function (dataIdx) {
  document
    .querySelector("#img_thumbnails > img.active")
    .classList.remove("active");
  document
    .querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`)
    .classList.add("active");
};

let thumbnailClick = function (dataIdx) {
  document
    .querySelector("#img_thumbnails > img.active")
    ?.classList.remove("active");
  document
    .querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`)
    .classList.add("active");
  document.querySelector(`#img_slides > img.active`).classList.remove("active");
  document
    .querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`)
    .classList.add("active");
};

leftArrow.addEventListener("click", function () {
  const currentActive = document.querySelector("#img_slides > img.active");
  const prevSibling = currentActive.previousElementSibling;

  currentActive.classList.remove("active");

  if (prevSibling) {
    // Select Prev Image
    prevSibling.classList.add("active");
    applyThumbnail(prevSibling.getAttribute("data-index"));
  } else {
    // Select Last Image
    const last = document.querySelector("#img_slides > :last-child");
    last.classList.add("active");
    applyThumbnail(last.getAttribute("data-index"));
  }
});

rightArrow.addEventListener("click", function () {
  const currentActive = document.querySelector("#img_slides > img.active");
  const nextSibling = currentActive.nextElementSibling;

  currentActive.classList.remove("active");

  if (nextSibling) {
    // Select Next Image
    nextSibling.classList.add("active");
    applyThumbnail(nextSibling.getAttribute("data-index"));
  } else {
    // Select First Image
    const first = document.querySelector("#img_slides > :first-child");
    first.classList.add("active");
    applyThumbnail(first.getAttribute("data-index"));
  }
});

document.querySelectorAll(".imgThumbnail").forEach(function (elem) {
  elem.addEventListener("click", function () {
    thumbnailClick(this.getAttribute("data-index"));
  });
});
/* ========== end ========== IMAGE SANDBOX SCRIPT (MODAL) ========== end ========== */

// Init
var itemCount = document.querySelectorAll("#img_slides > img").length;
for (var i = 1; i <= itemCount; i++) {
  document
    .querySelector(`#slider :nth-child(${i})`)
    .setAttribute("data-index", i);
  document
    .querySelector(`#img_slides :nth-child(${i})`)
    .setAttribute("data-index", i);
  document
    .querySelector(`#img_thumbnails :nth-child(${i})`)
    .setAttribute("data-index", i);
}
代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #bbbbbb;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: "Helvetica";
}

/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */

div#sandbox_modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000d;
  display: grid;
  /*align-items: center;*/
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity visibility;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

div#sandbox_modal.sandbox_modal_on {
  opacity: 1;
  visibility: visible;
}

div#sandbox_modal div#sandbox_modal_body {
  height: 100%;
  width: fit-content;
  background-color: #ddddddcc;
  display: grid;
  align-items: center;
}

/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */

div#product_img_bx {
}

img#featured {
  width: 400px;
  height: 250px;
  cursor: zoom-in;
  border: 2px solid #ffffff;
}

div#slide_wrapper {
  width: inherit;
  display: flex;
  justify-content: space-between;
  height: fit-content;
  margin-top: 10px;
}

div#slider {
  width: 270px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
  /*background-color: #444444;*/
}

img.thumbnail {
  min-width: 60px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid #ffffff;
}

img.thumbnail:not(:last-child) {
  margin-right: 10px;
}

img.thumbnail:hover,
img.thumbnail.active {
  opacity: 1;
}

div#slide_wrapper > div.slide_arrow {
  height: 30px;
  width: 30px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000;
  font-size: 15px;
  border-radius: 50%;
}

div#slide_wrapper > div.slide_arrow:hover {
  cursor: pointer;
}

/* this CSS line applies changes with the JS script */

div.slide_arrow.changes {
  visibility: hidden;
}

/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */

div#img_slides_wrapper {
  width: 400px;
  height: 250px;
  display: flex;
  border: 2px solid #efefef;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

div#img_slides_wrapper div#img_slides {
  overflow: hidden;
  display: flex;
  background-color: #0ff3;
}

img.imgSlide {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: opacity;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

img.imgSlide.active {
  opacity: 1;
}

img.imgThumbnail {
  width: 50px;
}

div.img_slide_arrow {
  color: transparent;
  height: inherit;
  width: 40px;
  position: absolute;
  z-index: 2;
}

div.img_slide_arrow:hover {
  cursor: pointer;
}

div.img_slide_arrow:hover > span {
  font-size: 20px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: #00000033;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.img_slide_arrow#img_slide_right {
  right: 0;
}

div.img_slide_arrow#img_slide_left span {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

div.img_slide_arrow#img_slide_right span {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: 0;
}

div#img_thumbnails {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div#img_thumbnails img.imgThumbnail {
  background-color: #888;
  margin: 5px;
}

div#img_thumbnails img.imgThumbnail:hover {
  cursor: pointer;
}

div#img_thumbnails img.imgThumbnail.active {
  border: 2px solid #0ff;
}

/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */
代码语言：javascript
复制
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
    <div id="product_img_bx">
      <img
        src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        alt=""
        id="featured"
        data-index="0"
      />

      <div id="slide_wrapper">
        <div id="slide_left" class="slide_arrow"><span>&#10094;</span></div>
        <div id="slider">
          <img
            src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail active"
          />
          <img
            src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
        </div>
        <div id="slide_right" class="slide_arrow"><span>&#10095;</span></div>
      </div>
    </div>
    <!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->

    <!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
    <div id="sandbox_modal">
      <div id="sandbox_modal_body">
        <div id="main_wrapper">
          <div id="img_slides_wrapper">
            <div id="img_slide_left" class="img_slide_arrow">
              <span>&#10094;</span>
            </div>
            <div id="img_slides">
              <img
                class="imgSlide active"
                src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
            </div>
            <div id="img_slide_right" class="img_slide_arrow">
              <span>&#10095;</span>
            </div>
          </div>

          <div id="img_thumbnails">
            <img
              class="imgThumbnail active"
              src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

    <script src="./script.js"></script>
  </body>
</html>

​

票数 2
EN

Stack Overflow用户

发布于 2022-06-24 21:30:29

感谢大卫Y，他激励我自己去解决我的问题。

当我向他(和StackOverflow)寻求帮助时，我坦率地认为他不会很快回复，所以在这段时间里，我开始想办法解决这个问题。很显然，解决这个问题的方法就嵌入了大卫Y.的答案中，我曾经把它发到了我之前的问题上。

首先，我创建了一个名为"thumbnailHover“的新函数，将必要的选择器复制到这个函数中，在底部称为函数，就像他的函数一样，并将HTML索引放入第一个沙箱的缩略图img标记中。

​

代码语言：javascript
复制
/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById('featured')
let modal = document.getElementById('sandbox_modal')

modalBtn.addEventListener('click', () => {
  modal.classList.add('sandbox_modal_on')
})

window.onclick = (e) => {
  if (e.target.matches('#sandbox_modal')) {
    modal.classList.remove('sandbox_modal_on')
  }
}
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')

for (var i = thumbnails.length - 1; i >= 0; i--) {
  let thumbnail = thumbnails[i]

  thumbnail.addEventListener('mouseenter', function() {
    if (activeImages.length > 0) {
      activeImages[0].classList.remove('active')
    }

    this.classList.add('active')
    document.getElementById('featured').src = this.src
  })
}

/* eventListener to run the script at the start and hide left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll('#slider .thumbnail').length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;

let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

let container = document.getElementById('slider')

buttonLeft.addEventListener('click', function() {
  container.scrollLeft -= 70;

  if (currentSlideCounter > 1) {
    currentSlideCounter -= 1;
  }
  change();
})

buttonRight.addEventListener('click', function() {
  container.scrollLeft += 70;

  if (currentSlideCounter < maxSlideCounter) {
    currentSlideCounter += 1;
  }
  change();
})

function change() {
  switch (currentSlideCounter) {
    case 1:
      document.querySelector('#slide_left').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_right').classList.remove('changes');
      }
      break;

    case maxSlideCounter:
      document.querySelector('#slide_right').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_left').classList.remove('changes');
      }
      break;

    default:
      document.querySelectorAll('.slide_arrow').forEach(el => el.classList.remove('changes'));
      break;
  }

  if (slidesAmount <= slidesPerScreen) {
    document.querySelectorAll('.slide_arrow').forEach(el => el.classList.add('changes'));
  }
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX (MODAL) SCRIPT ========== begin ========== */
let leftArrow = document.querySelector("#img_slide_left");
let rightArrow = document.querySelector("#img_slide_right");
let slidesContainer = document.querySelector("#img_slides");

let applyThumbnail = function(dataIdx) {
  document.querySelector("#img_thumbnails > img.active").classList.remove("active");
  document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};

let thumbnailHover = function(dataIdx) {
  document.querySelector("#img_thumbnails > img.active").classList.remove("active");
  document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
  document.querySelector(`#img_slides > img.active`).classList.remove("active");
  document.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
  document.querySelector(`#slider > img.active`).classList.remove("active");
  document.querySelector(`#slider > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};

let thumbnailClick = function(dataIdx) {
  document.querySelector("#img_thumbnails > img.active").classList.remove("active");
  document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
  document.querySelector(`#img_slides > img.active`).classList.remove("active");
  document.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};

leftArrow.addEventListener("click", function() {
  const currentActive = document.querySelector("#img_slides > img.active");
  const prevSibling = currentActive.previousElementSibling;

  currentActive.classList.remove("active");

  if (prevSibling) {
    // Select Prev Image
    prevSibling.classList.add("active");
    applyThumbnail(prevSibling.getAttribute("data-index"));
  } else {
    // Select Last Image
    const last = document.querySelector("#img_slides > :last-child");
    last.classList.add("active");
    applyThumbnail(last.getAttribute("data-index"));
  }
});

rightArrow.addEventListener("click", function() {
  const currentActive = document.querySelector("#img_slides > img.active");
  const nextSibling = currentActive.nextElementSibling;

  currentActive.classList.remove("active");

  if (nextSibling) {
    // Select Next Image
    nextSibling.classList.add("active");
    applyThumbnail(nextSibling.getAttribute("data-index"));
  } else {
    // Select First Image
    const first = document.querySelector("#img_slides > :first-child");
    first.classList.add("active");
    applyThumbnail(first.getAttribute("data-index"));
  }
});

document.querySelectorAll("#img_thumbnails .imgThumbnail").forEach(function(elem) {
  elem.addEventListener("click", function() {
    thumbnailClick(this.getAttribute("data-index"));
  });
});

document.querySelectorAll("#slider .thumbnail").forEach(function(elem) {
  elem.addEventListener("mouseenter", function() {
    thumbnailHover(this.getAttribute("data-index"));
  });
});
/* ========== end ========== IMAGE SANDBOX (MODAL) SCRIPT ========== end ========== */
代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #bbbbbb;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: "Helvetica";
}


/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */

div#sandbox_modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000d;
  display: grid;
  /*align-items: center;*/
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity visibility;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

div#sandbox_modal.sandbox_modal_on {
  opacity: 1;
  visibility: visible;
}

div#sandbox_modal div#sandbox_modal_body {
  height: 100%;
  width: fit-content;
  background-color: #ddddddcc;
  display: grid;
  align-items: center;
}


/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */

div#product_img_bx {}

img#featured {
  width: 400px;
  height: 250px;
  cursor: zoom-in;
  border: 2px solid #ffffff;
}

div#slide_wrapper {
  width: inherit;
  display: flex;
  justify-content: space-between;
  height: fit-content;
  margin-top: 10px;
}

div#slider {
  width: 270px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
  /*background-color: #444444;*/
}

img.thumbnail {
  min-width: 60px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid #ffffff;
}

img.thumbnail:not(:last-child) {
  margin-right: 10px;
}

img.thumbnail:hover,
img.thumbnail.active {
  opacity: 1;
}

div#slide_wrapper>div.slide_arrow {
  height: 30px;
  width: 30px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000;
  font-size: 15px;
  border-radius: 50%;
}

div#slide_wrapper>div.slide_arrow:hover {
  cursor: pointer;
}


/* this CSS line applies changes with the JS script */

div.slide_arrow.changes {
  visibility: hidden;
}


/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */

div#img_slides_wrapper {
  width: 400px;
  height: 250px;
  display: flex;
  border: 2px solid #efefef;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

div#img_slides_wrapper div#img_slides {
  overflow: hidden;
  display: flex;
  background-color: #0ff3;
}

img.imgSlide {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: opacity;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

img.imgSlide.active {
  opacity: 1;
}

img.imgThumbnail {
  width: 50px;
}

div.img_slide_arrow {
  color: transparent;
  height: inherit;
  width: 40px;
  position: absolute;
  z-index: 2;
}

div.img_slide_arrow:hover {
  cursor: pointer;
}

div.img_slide_arrow:hover>span {
  font-size: 20px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: #00000033;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.img_slide_arrow#img_slide_right {
  right: 0;
}

div.img_slide_arrow#img_slide_left span {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

div.img_slide_arrow#img_slide_right span {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: 0;
}

div#img_thumbnails {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div#img_thumbnails img.imgThumbnail {
  background-color: #888;
  margin: 5px;
}

div#img_thumbnails img.imgThumbnail:hover {
  cursor: pointer;
}

div#img_thumbnails img.imgThumbnail.active {
  border: 2px solid #0ff;
}


/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */
代码语言：javascript
复制
<!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
<div id="product_img_bx">
  <img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" id="featured" />

  <div id="slide_wrapper">
    <div id="slide_left" class="slide_arrow"><span>&#10094;</span></div>
    <div id="slider">
      <img data-index="0" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail active" />
      <img data-index="1" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img data-index="2" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img data-index="3" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img data-index="4" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img data-index="5" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img data-index="6" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img data-index="7" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
    </div>
    <div id="slide_right" class="slide_arrow"><span>&#10095;</span></div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->

<!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
<div id="sandbox_modal">
  <div id="sandbox_modal_body">
    <div id="main_wrapper">
      <div id="img_slides_wrapper">
        <div id="img_slide_left" class="img_slide_arrow"><span>&#10094;</span></div>
        <div id="img_slides">
          <img data-index="0" class="imgSlide active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="1" class="imgSlide" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="2" class="imgSlide" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="3" class="imgSlide" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="4" class="imgSlide" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="5" class="imgSlide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="6" class="imgSlide" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="7" class="imgSlide" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        </div>
        <div id="img_slide_right" class="img_slide_arrow"><span>&#10095;</span></div>
      </div>

      <div id="img_thumbnails">
        <img data-index="0" class="imgThumbnail active" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="1" class="imgThumbnail" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="2" class="imgThumbnail" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="3" class="imgThumbnail" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="4" class="imgThumbnail" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="5" class="imgThumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="6" class="imgThumbnail" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="7" class="imgThumbnail" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      </div>
    </div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

​

谢谢大卫Y。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72727931

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档