『Javascript』全屏轮播图的实现

本文案例涉及知识点：

布局：div 单位：vw、vh （页面可视区的宽度、高度） CSS：object-fit、position-absolute、opacity、transition、@media ES5语法、DOM 文章末尾附网盘链接，有需要的伙伴可直接提取

1. 结构搭建

<div class="image-slider">
    <div class="slide current">
      <img src="./img/夕阳1.jpg" alt="" class="image">
    </div>
    <div class="slide">
      <img src="./img/夕阳2.jpg" alt="" class="image">
    </div>
    <div class="slide">
      <img src="./img/夕阳3.jpg" alt="" class="image">
    </div>
  </div>

  <div id="prev">
    <i>&lt;</i>
  </div>
  <div id="next">
    <i>&gt;</i>
  </div>

2. 修改样式

*{
          
   
  margin: 0;
  padding: 0;
}
i{
          
   
  font-style: normal;
}
.image-slider{
          
   
  width: 100vw;
  height: 100vh;
}
.image-slider .slide{
          
   
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all linear .8s;
}
.image-slider .image{
          
   
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#prev,
#next{
          
   
  position: absolute;
  width: 80px;
  height: 80px;
  font-size: 48px;
  color: #fff;

  text-align: center;
  line-height: 80px;
  background-color: rgba(0,0,0,.6);
  border-radius: 50%;

  top: calc(50% - 40px);
  left: 50px;
  transition: all .3s;
  cursor: pointer;
}
#next{
          
   
  left: unset;
  right: 50px;
}
.image-slider .slide{
          
   
  opacity: 0;
}
.image-slider .slide.current{
          
   
  opacity: 1;
}
#prev:hover,
#next:hover{
          
   
  color: #000;
  background-color: rgba(255,255,255,.6);
}
@media screen and (max-width: 720px){
          
   
  #prev,
  #next{
          
   
    font-size: 24px;
    left: 25px;
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  #next{
          
   
    left: unset;
    right: 25px;
  }
}

3. 添加动作

window.addEventListener("load",function (){
          
   
// 获取元素
  const prev=document.querySelector("#prev")
  const next=document.querySelector("#next")
  const slides=document.querySelectorAll(.slide)

// 自动播放
  let autoPlay = true
  let forwards = true
  let timer=5000
  console.log(autoPlay)
  if (autoPlay){
          
   
    setInterval(forwards?handleNextClicked:handlePrevClicked,timer)
  }
// 注册点击事件
  next.addEventListener("click",handleNextClicked)
  prev.addEventListener("click",handlePrevClicked)
  
// 封装前进后退两个函数
  let currentIndex=0
  function handleNextClicked() {
          
   
    let current=slides[currentIndex];
    current.classList.remove(current);
    currentIndex++;
    if (currentIndex >=slides.length){
          
   
      currentIndex = 0;
    }
    slides[currentIndex].classList.add(current);
  }
  
  function handlePrevClicked() {
          
   
    let current=slides[currentIndex];
    current.classList.remove(current);
    currentIndex--;
    if (currentIndex <0 ){
          
   
      currentIndex = slides.length-1;
    }
    slides[currentIndex].classList.add(current);
  }
})

链接： 提取码：ly24