效果图
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.next
const next =document.querySelector('.next')
let i =1
next.addEventListener('click',function(){
i++
// i = i>5 ? 5 : i
if(i>=5){
i=5
this.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.prev
prev.addEventListener('click',function(){
i--
// i = i<1 ? 1 : i
if(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>
