效果图
HTML部分
<body><div class="pagination"><button class="prev"><</button><ul><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><button class="next">></button></div>
</body>
CSS部分
<style>*{padding: 0;margin: 0;box-sizing: border-box;}.pagination{margin: 50px auto;display: flex;justify-content: space-between;width: 300px;height: 50px;/* background-color: pink; */}.pagination ul{display: flex;flex: 1;justify-content: space-between;list-style: none;line-height: 50px;padding: 0 20px;}.pagination ul li{font-weight: 550;font-size: 18px;cursor: pointer;}.pagination ul li.active,.pagination ul li:hover{color: #409eff;}.pagination button{display: block;border: none;background-color: transparent;width: 50px;font-size: 20px;}button{cursor: pointer;}button:disabled{color: #c0c4cc;cursor: not-allowed;}button:hover{color:#409eff ;}</style>
JS部分
<script>// 1.nextconst next =document.querySelector('.next')let i =1next.addEventListener('click',function(){i++// i = i>5 ? 5 : iif(i>=5){i=5this.disabled = true;prev.disabled = false;// console.log('next-',this.disabled,this);}else{this.disabled = false;prev.disabled = false;// console.log('next-',this.disabled,this);}document.querySelector('.active').classList.remove('active')document.querySelector(`li:nth-child(${i})`).classList.add('active')})const prev=document.querySelector('.prev')// 2.prevprev.addEventListener('click',function(){i--// i = i<1 ? 1 : iif(i<=1){this.disabled = true;next.disabled = false;// console.log('prev-',this.disabled,this);}else{this.disabled = false;next.disabled = false;// console.log('prev-',this.disabled,this);}document.querySelector('.active').classList.remove('active')document.querySelector(`li:nth-child(${i})`).classList.add('active')})const ul=document.querySelector('ul')// 3.点击数字ul.addEventListener('click',function(e){if(e.target.tagName==='LI'){document.querySelector('.pagination .active').classList.remove('active')e.target.classList.add('active')}})
</script>
