white-space:nowrap与水平列表切换实现实例页面

展示

代码

• HTML：

  <div id="box" class="box">
    <ul>
      <li><img src="1.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="1.jpg"></li>
    </ul>
    <a id="prev" class="btn btn-prev">往前</a>
    <a href="javascript:" id="next" class="btn btn-next">往后</a>
  </div>

• CSS：

  .box {
    width: 300px;
    height: 100px;
    margin: 30px auto;
    position: relative;
    overflow: hidden;
  }
  .box > ul {
    position: absolute; left: 0;
    transition: left .2s;
    white-space: nowrap;
  }
  .box > ul > li {
    display: inline-block;
  }
  .box img {
    width: 128px;
    height: 96px;
  }
  .btn {
    position: absolute;
    font-size: 12px;
    background: white;
    padding: 2px 5px;
    top: 40px;
  }
  .btn {
    opacity: .95;
    color: #999;
  }
  .btn[href] {
    color: #333;
  }
  .btn-prev {
    left: 0;
  }
  .btn-next {
    right: 0;
  }

• JS：

  var elePrev = document.getElementById('prev'),
    eleNext = document.getElementById('next');
  
  var eleBox = document.getElementById('box');
  var eleUl = eleBox.querySelector('ul');
  
  if (elePrev && eleNext && eleBox && eleUl) {
    var maxX = eleBox.clientWidth - eleBox.scrollWidth;
  
    elePrev.onclick = function () {
      var href = elePrev.getAttribute('href');
      if (href) {
        eleUl.style.left = '0px';
        elePrev.removeAttribute('href');
        eleNext.setAttribute('href', 'javascript:');
      }
    };
    eleNext.onclick = function () {
      var href = eleNext.getAttribute('href');
      if (href) {
        eleUl.style.left = maxX + 'px';
        eleNext.removeAttribute('href');
        elePrev.setAttribute('href', 'javascript:');
      }
    };
  }