左右点击滚动

index.html

zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl







zjl

index.css 建议使用less,css主要是外层rankBox固定宽度为1198px,把多出的内容overflow:hidden隐藏,内层盒子rank宽度通过js获取

body{

width:100%;

}

.rankBox{

position: relative;

width:100%;

overflow: hidden;

height:185px;

background:#ffffff;

&:hover>span{

opacity: 1;

}

&>span{

position: absolute;

top:50%;

z-index: 100;

cursor: pointer;

opacity: 0;

transform: translateY(-50%);

-moz-transform: translateY(-50%);

-webkit-transform: translateY(-50%);

-o-transform: translateY(-50%);

transition-duration: 800ms;

-moz-transition-duration: 800ms; /* Firefox 4 */

-webkit-transition-duration: 800ms; /* Safari 和 Chrome */

-o-transition-duration: 800ms; /* Opera */

}

&>span:first-child{

left:0px;

}

&>span:last-child{

right:0px;

}

.rank {

display: flex;

justify-content: space-around;

position: absolute;

left:0px;

margin: 16px 0 0 0;

padding: 20px 0;

background: #ffffff;

vertical-align: middle;

transition-duration: 400ms;

-moz-transition-duration: 400ms; /* Firefox 4 */

-webkit-transition-duration: 400ms; /* Safari 和 Chrome */

-o-transition-duration: 400ms; /* Opera */

&>div {

display: inline-block;

height: 100%;

text-align: center;

width:171px;

height:100%;

cursor: pointer;

img {

height: 98px;

width: 98px;

}

span {

display:block;

padding: 5px 0;

text-align: center;

font-size: 14px;

color: #231815;

}

}

}

}

index.js 主要通过控制left来控制左右移动，通过控制n来确定移动多少

// (function(){

function handleMove(speed) {

let n=1198;

let rankDom = document.getElementById('rank')

let rankStyle = window.getComputedStyle ? window.getComputedStyle(rankDom, "") : rankDom.currentStyle;

let curEleBoxLeft = rankDom.style.left.replace('px', '');

let ctWidth = document.getElementById('ctBox').style.width;

ctWidth = 1198 / 7;

let relth = document.getElementsByClassName('ctBox').length;

rankDom.style.width = relth * ctWidth + 'px';

let currEleWidth = rankDom.style.width.replace('px', '');

let disLeft;

if (speed == 1) {

disLeft = parseFloat(curEleBoxLeft) + n;

if (disLeft >= 1198) {

return false;

}

rankDom.style.left = disLeft + 'px'

};

if (speed == 2) {

disLeft = curEleBoxLeft - n;

if (Math.abs(disLeft) >= currEleWidth) {

return false;

}

rankDom.style.left = disLeft + 'px'

}

if (Math.abs(disLeft) >= (currEleWidth - 1198)) {

setTimeout(function () {

document.getElementById('moveRight').style.cursor = 'not-allowed';

document.getElementById('moveLeft').style.cursor = 'pointer';

}, 400)



}

else if (disLeft >= 0) {

setTimeout(function () {

document.getElementById('moveRight').style.cursor = 'pointer';

document.getElementById('moveLeft').style.cursor = 'not-allowed';

}, 400)

}

}

// }())

备注：后面有查了资料，尽量不要操作DOM，所以通过css3中的属性transform: translateY来控制