Question

我试图让javascript中的函数在内容幻灯片的按钮上滑动与我点击的徽标/按钮相关的内容（移动它的位置）。这是HTML代码：

＆＃13;

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

＆＃13;

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

＆＃13;

你们看到有什么错误，或者有任何建议吗？ activeClient类正在点击（并且工作正常）但内容没有滑动（改变位置），我无法理解为什么。你们也需要css代码吗？谢谢！

我试图制作这个幻灯片内容的javascript函数，但某些内容无效

0 个答案: