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:'); } }; }