我试图让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类在click上移动(运行良好),但内容没有滑动(改变位置),我还不明白为什么。你们也需要css代码吗?谢谢!
最佳答案
我已经解决了,看起来我在错误的部分使用了数据pos。(我真傻)。我不得不在logos部分使用它,谢谢。
关于javascript - 我正在尝试使用此幻灯片内容的javascript函数,但某些方法无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35536973/