我正在尝试制作此幻灯片内容的javascript函数，但某些方法无法正常工作

Question

我正在尝试使javascript幻灯片中的功能与内容幻灯片的底部上与单击的徽标/按钮相关的内容（移动其位置）有关。 这是HTML代码：

 var links = document.querySelectorAll(".clientLogo"); var wrapper = document.querySelector("#wrapper"); var activeLink = 0; // event listeners for (var i = 0; i < links.length; i++) { var link = links[i]; link.addEventListener('click', setClickedItem, false); //item for the active link link.itemID = i; } //set first item as active links[activeLink].classList.add("activeClient"); function setClickedItem(e) { removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); } function removeActiveLinks() { for (var i = 0; i < links.length; i++) { links[i].classList.remove("activeClient"); } } // changing the slider position function changePosition(link) { var position = link.getAttribute("data-pos"); var translateValue = "translate3d(" + position + ", 0px, 0)"; wrapper.style[transformProperty] = translateValue; link.classList.add("activeClient"); } //transforms var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform" ]; var transformProperty = getSupportedPropertyName(transforms); function getSupportedPropertyName(properties) { for (var i = 0; i < properties.length; i++) { if (typeof document.body.style[properties[i]] != "undefined") { return properties[i]; } } return null; } 

 <section> <h3 class="about" id="clients">Clients</h3> <div class="client-controls"> <div class="client-control-next"> <img src="images/next.png"> </div> <div class="client-control-prev"> <img src="images/prev.png" </div> </div> </div> <div class="contentContainer"> <div id="wrapper"> <div id="itemOne" class="clientUnit" data-pos="0px"> <div class="client-face"> <img src="images/face1.png" alt="client-face" class="client-avatar"> <br> <strong class="client-name">Charles Francis</strong> <em class="client-title">Director of Development, <br>Megathrone International Corp.</em> </div> <div class="client-content"> <p>"<strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Etiam magna ipsum, cursus non lectus imperdiet, commodo tincidunt metus. Donec commodo tincidunt laoreet. Praesent at ornare diam. Cras sodales dapibus velit, non gravida justo dignissim in. Nullam ac lobortis nibh. Ut tincidunt lacus velit, sed venenatis neque bibendum ut."</p> </div> </div> <div id="itemTwo" class="clientUnit" data-pos="-800px"> <div class="client-face"> <img src="images/face2.png" alt="client-face" class="client-avatar"> <br> <strong class="client-name">Scott Summers</strong> <em class="client-title">Regional Director, <br>Therasite United Int.</em> </div> <div class="client-content"> <p>"<strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Etiam magna ipsum, cursus non lectus imperdiet, commodo tincidunt metus. Donec commodo tincidunt laoreet. Praesent at ornare diam. Cras sodales dapibus velit, non gravida justo dignissim in. Nullam ac lobortis nibh. Ut tincidunt lacus velit, sed venenatis neque bibendum ut."</p> </div> </div> <div id="itemThree" class="clientUnit" data-pos="-1600px"> <div class="client-face"> <img src="images/face3.png" alt="client-face" class="client-avatar"> <br> <strong class="client-name">Henry Philip</strong> <em class="client-title">Design Team Leader, <br>WeMakeItForYou CO</em> </div> <div class="client-content"> <p>"<strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Etiam magna ipsum, cursus non lectus imperdiet, commodo tincidunt metus. Donec commodo tincidunt laoreet. Praesent at ornare diam. Cras sodales dapibus velit, non gravida justo dignissim in. Nullam ac lobortis nibh. Ut tincidunt lacus velit, sed venenatis neque bibendum ut."</p> </div> </div> <div id="itemFour" class="clientUnit" data-pos="-2400px"> <div class="client-face"> <img src="images/face4.png" alt="client-face" class="client-avatar"> <br> <strong class="client-name">Cecilia Reyes</strong> <em class="client-title">General Manager,<br>Graudia Bentmart</em> </div> <div class="client-content"> <p>"<strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Etiam magna ipsum, cursus non lectus imperdiet, commodo tincidunt metus. Donec commodo tincidunt laoreet. Praesent at ornare diam. Cras sodales dapibus velit, non gravida justo dignissim in. Nullam ac lobortis nibh. Ut tincidunt lacus velit, sed venenatis neque bibendum ut."</p> </div> </div> </div> </div> <div class="client-logos"> <div class="clientLogo" style="background-image: url('images/logo4.jpg');"></div> <div class="clientLogo" style="background-image: url('images/logo2.png');"></div> <div class="clientLogo" style="background-image: url('images/logo3.jpg');"></div> <div class="clientLogo" style="background-image: url('images/logo1.png');"></div> </section> 

你们看到任何错误或有任何建议吗？ activeClient类正在单击（并且工作正常），但是内容没有滑动（更改位置），我还不明白为什么。 你们也需要CSS代码吗？ 谢谢！

Answer 1

我已经解决了它，好像我在错误的部分中使用了data-pos一样。 （对不起，我）。 我必须在徽标部分中使用它，谢谢。