Question

我正在尝试创建一个具有滑动效果的旋转木马。基本设置是我有2个div包围滑动内容。第一个div的宽度（outerWrapper）是所有幻灯片宽度的大小。下一个div的宽度（innerWrapper）是1 div的大小。

当它应该更改幻灯片时，innerWrapper会获得x数量的转换，并且会从css转换中获得动画。

我有一切正常，但有一件事我想改变。我想从像素更改为百分比。

第29行：

innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';

我尝试了很多东西，但没有任何效果。唯一有效的是targetIndex * 20 + %，但这只适用于5个div。它不是具体的解决方案。如何制作translateX百分比？

JSFiddle

＆＃13;

var trigger = document.getElementsByClassName('trigger'),
  outerWrapper = document.createElement('div'),
  innerWrapper = document.createElement('div'),
  slide = document.getElementsByClassName('slide'),
  parentElm = slide[0].parentNode,
  imgWidth = slide[0].offsetWidth,
  lastElm = trigger.length - 1,
  previousSelectedIndex = 0;

innerWrapper.id = 'innerWrapper';
outerWrapper.id = 'outerWrapper';

trigger[0].className += ' selected';
innerWrapper.style.width = imgWidth * (lastElm + 1) + 'px';

while (slide.length) {
  innerWrapper.appendChild(slide[0]);
}

for (var i = 0; i < trigger.length; i++) {
  trigger[i].addEventListener('click', function(e) {
    clickEvent(e);
  })
}

function clickEvent(e) {
  if (!hasClass(e.target, 'selected')) {
    var targetIndex = [].slice.call(trigger).indexOf(e.target);
    innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';

    e.target.className += ' selected';
    removeClass(trigger[previousSelectedIndex], 'selected');
    previousSelectedIndex = targetIndex;
  }
}


outerWrapper.appendChild(innerWrapper);
parentElm.appendChild(outerWrapper);


function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, ' ');
  }
}

＆＃13;

#outerWrapper {
  float: left;
  width: 270px;
  height: 266px;
  overflow: hidden;
}
#innerWrapper {
  position: relative;
  display: flex;
  transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
ul.triggers li {
  float: left;
  margin: 0 5px;
  font: bold 16px arial;
  cursor: pointer;
  background-color: #ccc;
  padding: 10px;
}
ul.triggers li.selected {
  background-color: orange;
}

＆＃13;

<img class="slide" width="270" src="http://i.imgur.com/XyWadkY.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/oWbhwWT.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/IXcqVB1.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />

<ul class="triggers">
  <li class="trigger">1</li>
  <li class="trigger">2</li>
  <li class="trigger">3</li>
  <li class="trigger">4</li>
  <li class="trigger">5</li>
</ul>

＆＃13;

Answer 1

试试这个，

 innerWrapper.style.transform = 'translateX(-' +  (targetIndex*(100/document.getElementsByClassName("slide").length)) + '%)';

将数量从px更改为基于百分比

JSFiddle

1 个答案: