JS 小米官网轮播图
效果如图
Html部分
<div class="box iconfont">
<img src="img/banner1.jpg" alt="" class="slider">
<!-- 前后页 -->
<a href="" class="p-icon prev"></a>
<a href="" class="p-icon next"></a>
<!-- 分页 -->
<div class="page-box">
<a href="#" class="page active"></a>
<a href="#" class="page"></a>
<a href="#" class="page"></a>
<a href="#" class="page"></a>
<a href="#" class="page"></a>
</div>
</div>
Css部分
<style>
.box{
position: relative;
width: 1226px;
height: 460px;
margin: 50px auto;
}
.box img{
width: 100%;
}
/* 前后页样式 */
.p-icon{
display: inline-block;
color: #333;
text-decoration: none;
font-size: 30px;
width: 41px;
height: 69px;
line-height: 69px;
text-align: center;
border-radius: 3px;
position: absolute;
}
.p-icon:hover{
background-color: rgba(0, 0, 0, 0.4);
}
.p-icon.prev{
left: 0;
top: 200px;
}
.p-icon.next{
right: 0;
top: 200px;
}
/* 分页 */
.page-box{
position: absolute;
right: 0;
width: 200px;
bottom: 32px;
}
.page{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 2px solid #aaa;
margin-left: 5px;
}
.page.active{
background-color:#fff;
}
.page:hover{
background-color:#fff;
}
</style>
Script部分
<script>
//轮播图片
let slider = document.querySelector(".slider");
//分页
let pages = document.querySelectorAll(".page");
//图片index
let num=1;
//封装函数下一页轮播
function goNext(){
num++;
//临界值判断
if(num == 6){
num = 1;
}
slider.src = `img/banner${num}.jpg`;
// 分页icon随着num变化而变化
document.querySelector(".page.active").classList.remove("active");
pages[num-1].classList.add("active");
}
let nextBtn = document.querySelector(".next");
nextBtn.addEventListener("click",function(e){
e.preventDefault();
goNext();
});
//封装函数上一页轮播
function goPrev(){
num--;
if(num == 0){
num = 5;
}
slider.src = `img/banner${num}.jpg`;
document.querySelector(".page.active").classList.remove("active");
pages[num-1].classList.add("active");
}
let prevBtn = document.querySelector(".prev");
prevBtn.addEventListener("click",function(e){
e.preventDefault();
goPrev();
});
//自动播放
setInterval(goNext,2000);
//点击分页图标,切换轮播图
pages.forEach(function(item,index){
item.addEventListener("click",function(e){
e.preventDefault();
if(!item.classList.contains("active")){
document.querySelector(".page.active").classList.remove("active");
item.classList.add("active");
slider.src = "./img/banner" + parseInt(index+1) + ".jpg";
}
})
});
</script>