原生JS实现滚动卡片功能

Html

Css

* {
	margin:0;
	padding:0;
}
.num-list-cont {
	position:relative;
	margin:30px 60px;
	border:1px solid #000;
}
.icon-left,.icon-right {
	position:absolute;
	top:0;
	width:30px;
	height:30px;
	background:deeppink;
	cursor:pointer;
}
.icon-left {
	left:-35px;
}
.icon-right {
	right:-35px;
}
.num-list-box {
	position:relative;
	height:30px;
	overflow:hidden;
}
.num-list {
	overflow:hidden;
	position:absolute;
	left:0;
}
.num-list > li {
	list-style:none;
	float:left;
	width:54px;
	height:24px;
	line-height:24px;
	margin-right:10px;
	background:#ccc;
	text-align:center;
	cursor:pointer;
	transition:0.1s all;
}
.num-list > li:hover,.num-list > li.active {
	background:#1890ff;
	color:#fff;
}
.no-click {
	cursor:not-allowed;
	opacity:0.3 !important;
	pointer-events:none;
}

var btnR = document.querySelector('.js-goRight');
var btnL = document.querySelector('.js-goLeft');
var ulDomWrap = document.querySelector('.num-list-box');
var ulDomWrapW = ulDomWrap.offsetWidth;
var ulDomWrapCenter = Math.ceil(ulDomWrap.offsetWidth / 2);
var ulDom = document.querySelector('.num-list');
var liW;

setTimeout(initData, 2000)

function initData() {
    // 造数据
    var liNum = 30;
    for (var i = 0; i < liNum; i++) {
        var li = document.createElement('li');
        li.innerHTML = i + 1;
        li.setAttribute('index', i);
        ulDom.appendChild(li)
    }

// 有了数据后的操作
    // li宽度
    liW = ulDom.children[0].offsetWidth + parseInt(getComputedStyle(ulDom.children[0]).marginRight);
    // 设置ul宽度
    ulDom.style.width = liW * ulDom.children.length + 'px';
    // 按钮判断
    disableBtn();
    // 有了数据后的操作 end
}

// 计步
var num = 0;
// 剩余在Box里的ul长度
var showItemW;
// 存放class
var classLeftEnable = "seachart-left js-goLeft";
var classLeftDisable = "seachart-left js-goLeft no-click";
var classRitEnable = "seachart-right js-goRight";
var classRitDisable = "seachart-right js-goRight no-click";

// 判断是否禁用左右按钮
function disableBtn() {
    ulDomWrapW = ulDomWrap.offsetWidth;
    showItemW = ulDom.offsetWidth - (Math.abs(ulDom.offsetLeft) + ulDomWrap.offsetLeft);

if (ulDomWrapW > ulDom.offsetWidth - 10 && ulDom.offsetLeft == 0) {
        // 刚进来的时候，如果ul比box小，并且ul没移动过，2个按钮禁用

btnL.className = classLeftDisable;
        btnR.className = classRitDisable;
    } else if (ulDom.offsetWidth - 10 > ulDomWrapW && ulDom.offsetLeft == 0) {
        // ul比box长，ul在起点，左按钮禁用，右按钮解禁
        btnL.className = classLeftDisable;
        btnR.className = classRitEnable;
    } else if (ulDom.offsetWidth - 10 > ulDomWrapW && ulDom.offsetLeft != 0) {
        // ul比box长，ul不在起点

// 如果ul剩余在box里的长度小于box，禁用右按钮
        if (showItemW < ulDomWrapW) {
            btnR.className = classRitDisable;
        } else {
            // 如果ul剩余在box里的长度大于box，2个按钮解禁
            btnR.className = classRitEnable;
            btnL.className = classLeftEnable;
        }
    }
}

// 右按钮
btnR.addEventListener('click', function() {
    // 只要点击了右按钮，就给左按钮解禁
    btnL.className = classLeftEnable;
    var step3;
    // ul在0原位被点击右按钮移动
    console.log('ulDom.offsetLeft   ' + ulDom.offsetLeft)
    if (ulDom.offsetLeft == 0) {
        // ul在原位，并且剩余长度大于盒子宽度
        if (ulDom.offsetWidth - ulDomWrapW > ulDomWrapW) {
            step3 = Math.ceil(Math.abs(ulDom.offsetLeft) + ulDomWrap.offsetWidth)
            animate(ulDom, -step3, function() {
                // 判断操作要放在回调里
                // ul还在box里的长度
                showItemW = ulDom.offsetWidth - (Math.abs(ulDom.offsetLeft) + ulDomWrap.offsetLeft);

// 只要ul在box的长度小于box长度，就说明滚完
                if (showItemW < ulDomWrapW) {
                    btnR.className = classRitDisable;
                }
            })
        } else {
            // ul在原位，但是剩余长度小于盒子宽度
            step3 = ulDom.offsetWidth - ulDomWrap.offsetWidth;
            animate(ulDom, -step3, function() {
                // 右侧按钮锁定
                btnR.className = classRitDisable;
            })
        }

} else {
        // ul的li被点击后，不在0位置了，点击右移动按钮
        // ul不在原位，剩余宽度为 ulW - (abs(ul.offsetLeft) + boxW)
        if (ulDom.offsetWidth - ulDomWrapW - Math.abs(ulDom.offsetLeft) > ulDomWrapW) {
            // console.log('ul不在原位，并且剩余长度大于盒子宽度')
            step3 = Math.abs(ulDom.offsetLeft) + ulDomWrap.offsetWidth;
            animate(ulDom, -step3, function() {
                // 判断操作要放在回调里
                // ul还在box里的长度
                showItemW = ulDom.offsetWidth - (Math.abs(ulDom.offsetLeft) + ulDomWrap.offsetLeft);

// 只要ul在box的长度小于box长度，就说明滚完
                if (showItemW < ulDomWrapW) {
                    btnR.className = classRitDisable;
                }
            })
        } else {
            // ul不在原位，但是剩余长度小于盒子宽度
            // console.log(' ul不在原位，但是剩余长度小于盒子宽度')
            step3 = ulDom.offsetWidth - ulDomWrap.offsetWidth
            animate(ulDom, -step3, function() {
                // 右侧按钮锁定
                btnR.className = classRitDisable;
                // 左侧按钮解锁
                btnL.className = classLeftEnable;

})
        }
    }
})

// 左按钮
// ul没有移动过，禁用左按钮
if (ulDom.offsetLeft == 0) {
    btnL.className = classLeftDisable;
}
btnL.addEventListener('click', function() {

// 点击左侧按钮
    if (Math.abs(ulDom.offsetLeft) < ulDomWrapW) {
        // ul左侧偏移小于box宽度，说明到顶了
        // console.log('ul左侧偏移小于box宽度，说明到顶了')
        animate(ulDom, 0, function() {
            // 左侧按钮锁定
            btnL.className = classLeftDisable;
            // 右侧按钮解绑
            btnR.className = classRitEnable;
        })

} else {
        // ul左侧偏移大于box宽度，那么ul往左跑一个box宽度
        // console.log('ul左侧偏移大于box宽度，那么ul往左跑一个box宽度')
        var step4 = Math.abs(ulDom.offsetLeft) - ulDomWrapW
        animate(ulDom, -step4, function() {
            // 右侧按钮解绑
            btnR.className = classRitEnable;
        })

}

})

// 让第一个li选中
$(ulDom).find('li').eq(0).addClass('active');
var ulScrollLen;
// li居中，li是后面append进来的，要用事件代理
$('.num-list').on('click', 'li', function() {
    $(this).addClass('active').siblings().removeClass('active')
    var idx = $(this).attr('index');
    ulDomWrapCenter = Math.ceil(ulDomWrapW / 2);
    liClick(idx, ulDomWrapCenter);
})

function liClick(idx) {
    var step, liEndLen, liScrollLen;

if (ulDom.offsetLeft == 0) {
        // 当前li到结尾的距离
        liEndLen = ulDom.offsetWidth - liW * idx;
        // ul在原位，没有移动过的时候
        step = liW * idx - ulDomWrapCenter;

if (step > 0 && liEndLen > ulDomWrapCenter) {
            // 点击的li的偏移过了中线，说明li在中线右边，ul左移,解绑左按钮
            animate(ulDom, -(step + liW / 2));
            btnL.className = classLeftEnable;
        } else {
            // 点击的li的偏移没有过中线，说明li在中线左边，ul不动
            // console.log('点击li，ul不动')
        }
    } else {
        // ul不在原位
        liScrollLen = idx * liW - Math.abs(ulDom.offsetLeft);
        // 1. li在盒子右侧
        if (liScrollLen > ulDomWrapCenter) {
            var step1;
            liEndLen = ulDom.offsetWidth - liW * idx;

// 如果当前li的末尾大于盒子一半宽度，那么就往左滚动
            if (liEndLen >= ulDomWrapCenter) {
                step1 = idx * liW - ulDomWrapCenter + liW / 2;
                animate(ulDom, -step1);
            } else {
                // 如果li的末尾不够盒子的一半，说明到底了，显示到最后一个即可
                step1 = ulDom.offsetWidth - ulDomWrap.offsetWidth;
                animate(ulDom, -step1, function() {
                    // 显示最后一个，右按钮锁定
                    btnR.className = classRitDisable;
                });
            }

} else {
            // 2. li在盒子左侧
            // console.log('li在左侧')

var step2;
            // 如果当前li的前面距离大于盒子一半宽度，那么就往右滚动
            if (liW * idx >= ulDomWrapCenter) {
                step2 = ulDom.offsetLeft + Math.ceil((Math.abs(ulDom.offsetLeft) + ulDomWrapCenter - liW * idx) - liW / 2);
                animate(ulDom, step2);
                liEndLen = ulDom.offsetWidth - liW * idx;
                if (liEndLen < ulDomWrapCenter) {
                    // console.log('右按钮锁定，不能解绑')
                } else {
                    // 右按钮解绑
                    btnR.className = classRitEnable;
                }
            } else {
                // 如果li的前面不够盒子的一半，说明到顶了，显示到第一个即可
                animate(ulDom, 0);
                // 左按钮锁定
                btnL.className = classLeftDisable;
                // 右按钮解绑
                btnR.className = classRitEnable;
            }

}
    }
}

window.addEventListener('resize', function() {
    ulDomWrapW = ulDomWrap.offsetWidth;
    disableBtn();

$('.num-list li').click(function() {
        $(this).addClass('active').siblings().removeClass('active')
        var idx = $(this).attr('index');
        ulDomWrapCenter = ulDomWrapW / 2;
        liClick(idx, ulDomWrapCenter);
    })
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

原生JS实现滚动卡片功能



代码描述：原生JS实现滚动卡片功能，点击卡片居中

更新时间：2022-08-02 00:49:43
【思路】
1. 宽度不是定死的，可以根据屏幕自适应
2. 点击后的li居中判断和前后剩余的ul长度与容器的宽度差值有关
3. 左右按钮的判断要分2种，ul<容器框， ul与容器差值>容器框，是否左右顶格也要判断
4. 还是要先分析思路再动笔写，会更清晰，注释可以多写一点没关系

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

诞。

相关代码

原生JS实现滚动卡片功能

最新