JS 小米官网轮播图

效果如图

Html部分

<div class="box iconfont">

      <img src="img/banner1.jpg" alt="" class="slider">

<!-- 前后页 -->

    <a href="" class="p-icon prev">&#xe663;</a>

    <a href="" class="p-icon next">&#xe670;</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>