使每个缩略图与显示图像对应

Question

我将这个图像滑块提升到这个级别，我想我需要一些帮助。

我在显示滑块的底部创建了一个带有箭头的图像滑块和缩略图。 显示滑块工作得很好，只是从我编写的 JavaScript 代码中，我似乎无法使每个缩略图与显示图像滑块相对应。

我让这个滑块起作用的意图是：当点击缩略图时，它会反映在显示滑块中。 此外，当单击显示滑块的左箭头或右箭头时，相应的缩略图将变为活动状态。 最后，随着淡入淡出过渡，也许？

看我写的代码：

 let leftArrow = document.querySelector('#slide_left') let rightArrow = document.querySelector('#slide_right') let slidesContainer = document.querySelector('#slides') leftArrow.addEventListener('click', function() { const last = document.querySelector('#slides > :last-child'); last.remove(); slidesContainer.prepend(last); }) rightArrow.addEventListener('click', function() { const first = document.querySelector('#slides > :first-child'); first.remove(); slidesContainer.append(first); })

 * { box-sizing: border-box; } body { background-color: #555; height: 100vh; display: grid; align-items: center; justify-items: center; } div#slides_wrapper { width: 400px; display: flex; border: 2px solid #efefef; justify-content: space-between; margin-bottom: 20px; } div#slides_wrapper div#slides { width: 300px; overflow: hidden; display: flex; background-color: #0ff3; } img.slide { width: 100%; } img.thumbnail { width: 50px; } div.slide_arrow { font-size: 20px; background-color: #0f0f0f; color: #f0f0f0; height: 40px; width: 40px; display: grid; justify-items: center; align-items: center; align-self: center; } div.slide_arrow:hover { cursor: pointer; } div.slide_arrow#slide_left { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } div.slide_arrow#slide_right { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } div#thumbnails { width: 400px; display: flex; flex-wrap: wrap; justify-content: space-around; } div#thumbnails img.thumbnail { background-color: #888; margin: 5px; } div#thumbnails img.thumbnail:hover { cursor: pointer; } div#thumbnails img.thumbnail.active { border: 2px solid #0ff; }

 <div id="main_wrapper"> <div id="slides_wrapper"> <div id="slide_left" class="slide_arrow"><span>&#10094;</span></div> <div id="slides"> <img class="slide" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> </div> <div id="slide_right" class="slide_arrow"><span>&#10095;</span></div> </div> <div id="thumbnails"> <img class="thumbnail 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="thumbnail" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> </div> </div>

如果需要，请随时更改代码。 我真的需要帮助。

Answer 1

尝试使用data属性来帮助建立索引。 我向缩略图添加了一个侦听器，以便它显示相应的图像。

 let leftArrow = document.querySelector("#slide_left"); let rightArrow = document.querySelector("#slide_right"); let slidesContainer = document.querySelector("#slides"); let applyThumbnail = function (dataIdx) { document.querySelector("#thumbnails > img.active").classList.remove("active"); document .querySelector(`#thumbnails > [data-index='${parseInt(dataIdx)}']`) .classList.add("active"); }; let thumbnailClick = function (dataIdx) { document.querySelector("#thumbnails > img.active").classList.remove("active"); document .querySelector(`#thumbnails > [data-index='${parseInt(dataIdx)}']`) .classList.add("active"); document.querySelector(`#slides > img.active`).classList.remove("active"); document .querySelector(`#slides > [data-index='${parseInt(dataIdx)}']`) .classList.add("active"); }; leftArrow.addEventListener("click", function () { const currentActive = document.querySelector("#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("#slides > :last-child"); last.classList.add("active"); applyThumbnail(last.getAttribute("data-index")); } }); rightArrow.addEventListener("click", function () { const currentActive = document.querySelector("#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("#slides > :first-child"); first.classList.add("active"); applyThumbnail(first.getAttribute("data-index")); } }); document.querySelectorAll(".thumbnail").forEach(function (elem) { elem.addEventListener("click", function () { thumbnailClick(this.getAttribute("data-index")); }); });

 * { box-sizing: border-box; } body { background-color: #555; height: 100vh; display: grid; align-items: center; justify-items: center; } div#slides_wrapper { width: 400px; display: flex; border: 2px solid #efefef; justify-content: space-between; margin-bottom: 20px; } div#slides_wrapper div#slides { width: 300px; overflow: hidden; display: flex; background-color: #0ff3; } img.slide { width: 100%; display: none; } img.slide.active { display: block; } img.thumbnail { width: 50px; } div.slide_arrow { font-size: 20px; background-color: #0f0f0f; color: #f0f0f0; height: 40px; width: 40px; display: grid; justify-items: center; align-items: center; align-self: center; } div.slide_arrow:hover { cursor: pointer; } div.slide_arrow#slide_left { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } div.slide_arrow#slide_right { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } div#thumbnails { width: 400px; display: flex; flex-wrap: wrap; justify-content: space-around; } div#thumbnails img.thumbnail { background-color: #888; margin: 5px; } div#thumbnails img.thumbnail:hover { cursor: pointer; } div#thumbnails img.thumbnail.active { border: 2px solid #0ff; }

 <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./style.css" /> </head> <body> <div id="main_wrapper"> <div id="slides_wrapper"> <div id="slide_left" class="slide_arrow"><span>&#10094;</span></div> <div id="slides"> <img data-index="0" class="slide 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="slide" 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="slide" 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="slide" 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="slide" 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="slide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> </div> <div id="slide_right" class="slide_arrow"><span>&#10095;</span></div> </div> <div id="thumbnails"> <img data-index="0" class="thumbnail 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="thumbnail" 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="thumbnail" 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="thumbnail" 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="thumbnail" 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="thumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> </div> </div> <script src="./script.js"></script> </body> </html>

Answer 2

步

1. 您需要获取缩略图列表并设置活动数字变量以放置显示的缩略图的初始数量
2. 当用户单击左键时，减少活动数字并在达到最小值时将其设置为缩略图的长度
3. 当用户单击右键时，增加活动数量并在达到最低值时将其重置。
4. 每次点击都会先清理当前活动类

代码：

 let leftArrow = document.querySelector('#slide_left') let rightArrow = document.querySelector('#slide_right') let slidesContainer = document.querySelector('#slides') let thumbnailContainer = document.querySelector('#thumbnails') let thumbnails = document.getElementsByClassName('thumbnail') let activeThumbnailNumber = 0 const removeAllActiveThumbnail = () => { for (let index = 0; index < thumbnails.length; index++) { thumbnails[index].classList.remove("active");; } } leftArrow.addEventListener('click', function() { const lastSlide = document.querySelector('#slides > :last-child'); lastSlide.remove(); slidesContainer.prepend(lastSlide); if (activeThumbnailNumber == 0) { activeThumbnailNumber = thumbnails.length -1 } else { activeThumbnailNumber-- } removeAllActiveThumbnail() thumbnails[activeThumbnailNumber].classList.add('active') }) rightArrow.addEventListener('click', function() { const firstSlide = document.querySelector('#slides > :first-child'); firstSlide.remove(); slidesContainer.append(firstSlide); if (activeThumbnailNumber === thumbnails.length -1) { activeThumbnailNumber = 0 } else { activeThumbnailNumber++ } removeAllActiveThumbnail() thumbnails[activeThumbnailNumber].classList.add('active') })

 * { box-sizing: border-box; } body { background-color: #555; height: 100vh; display: grid; align-items: center; justify-items: center; } div#slides_wrapper { width: 400px; display: flex; border: 2px solid #efefef; justify-content: space-between; margin-bottom: 20px; } div#slides_wrapper div#slides { width: 300px; overflow: hidden; display: flex; background-color: #0ff3; } img.slide { width: 100%; } img.thumbnail { width: 50px; } div.slide_arrow { font-size: 20px; background-color: #0f0f0f; color: #f0f0f0; height: 40px; width: 40px; display: grid; justify-items: center; align-items: center; align-self: center; } div.slide_arrow:hover { cursor: pointer; } div.slide_arrow#slide_left { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } div.slide_arrow#slide_right { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } div#thumbnails { width: 400px; display: flex; flex-wrap: wrap; justify-content: space-around; } div#thumbnails img.thumbnail { background-color: #888; margin: 5px; } div#thumbnails img.thumbnail:hover { cursor: pointer; } div#thumbnails img.thumbnail.active { border: 2px solid #0ff; }

 <div id="main_wrapper"> <div id="slides_wrapper"> <div id="slide_left" class="slide_arrow"><span>&#10094;</span></div> <div id="slides"> <img class="slide" src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="slide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> </div> <div id="slide_right" class="slide_arrow"><span>&#10095;</span></div> </div> <div id="thumbnails"> <img class="thumbnail 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="thumbnail" src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="thumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> </div> </div>

Answer 3

根据大卫 Y 的回答，我找到了一种让它褪色的方法。 更准确地说，我是如何实现它的。 我所做的所有更改都在 CSS 中。 将图像幻灯片的直接容器设置为相对位置，将幻灯片本身设置为绝对位置。 此外，使用 top、left、width 和 height 属性使它们留在容器中。 我猜还有不透明度的 z-index 属性。

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

 * { box-sizing: border-box; } body { background-color: #555; height: 100vh; display: grid; align-items: center; justify-items: center; } 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_left {} 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; }

 <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>

只是觉得可以分享我的小知识。 :)