原生js制作轮播图

原生js 制作的轮播图

今天学习了一个原生js轮播图的方法。
效果图如下

image.png

通过点击上下页和中间的点进行翻页，
通过改变图片的z-index值来实现效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <title>Wheel-carousel</title>

  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="carousel">
    <div class="panels">
      <a href="#"><img src="./css/1.jpg" alt=""></a>
      <a href="#"><img src="./css/2.jpg" alt=""></a>
      <a href="#"><img src="./css/3.jpg" alt=""></a>
      <a href="#"><img src="./css/4.jpg" alt=""></a>
    </div>
    <div class="action">
      <span class="pre">上一页</span>
      <span class="next">下一页</span>
      <div class="dots">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
  <script src="./js/index.js"></script>
</body>
</html>

*{
  margin: 0;padding: 0;
}

.carousel{
  max-width: 400px;
  margin-top: 60px;
}

.carousel .panels {
  position: relative;
  height: 100%;
  overflow: hidden;
  height: 200px;

}

.carousel .panels > a{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.carousel .panels > a:first-child{
  z-index: 10;
}

.carousel .panels img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel .action{
  display: flex;
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  user-select:none;
}


.carousel  .action .pre{
  order: 1;
  cursor: pointer;
}

.carousel  .action .dots{
  order: 2;
  flex: 1;
  text-align: center;
}
.carousel  .action .next{
  order: 3;
  cursor: pointer;
}

.carousel .dots >span{
  display: inline-block;
  width: 6px;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  cursor: pointer;
}

.carousel .dots > span.active{
  width: 10px;
  background: #aaa;
}


const $ = s=>document.querySelector(s)
const $$ = s=>document.querySelectorAll(s)

//事件代理
$('.carousel .dots').onclick = function(e){
    if(e.target.tagName !== 'SPAN') return
    let index = Array.from($$('.carousel .dots span')).indexOf(e.target)
    setDots(index)
    setPanels(index)
}

$('.pre').onclick = function(e){
    let index = Array.from($$('.carousel .dots span')).indexOf($('.carousel .dots .active'))

    //避免index值为负数
    index = (index-1 + $$('.carousel .dots span').length) % $$('.carousel .dots span').length
    setDots(index)
    setPanels(index)
}

$('.next').onclick = function(e){
    let index = Array.from($$('.carousel .dots span')).indexOf($('.carousel .dots .active'))
    //避免index值为负数
    index = (index+1) % $$('.carousel .dots span').length
    setDots(index)
    setPanels(index)
}

function setDots(index){
    $$('.carousel .dots span').forEach(dot => dot.classList.remove('active'))
    $$('.carousel .dots span')[index].classList.add('active')
}

function setPanels(index){
    $$('.carousel .panels a').forEach(penel => penel.style.zIndex = 1)
    $$('.carousel .panels a')[index].style.zIndex = 10
}

刚刚我用了最原始的方式实现了轮播图

假设轮播图变多了没有办法复用，因此我们把这个轮播图封装成一个组件

class Carousel {
    constructor(root){
        this.root = root
        this.dotsCt = root.querySelector('.dots')
        this.dots = Array.from(root.querySelectorAll('.dots > span'))
        this.panels = Array.from(root.querySelectorAll('.panels > a'))
        this.pre = root.querySelector('.action .pre')
        this.next = root.querySelector('.action .next')
        this.bind()
    }

    bind(){
 // 注意箭头函数e如果用function(e) this指向会变成 dotsCt 
        this.dotsCt.onclick = e => {
            if(e.target.tagName !== 'SPAN') return
            var index = this.dots.indexOf(e.target)
            this.setDots(index)
            this.setPanels(index)
        }

        this.pre.onclick = e=>{
            let index =this.dots.indexOf(this.root.querySelector('.dots .active'))
        
            //避免index值为负数
            index = (index-1 + this.dots.length) % this.dots.length
            this.setDots(index)
            this.setPanels(index)
        }
        
        this.next.onclick = e => {
            let index =this.dots.indexOf(this.root.querySelector('.dots .active'))
            //避免index值为负数
            index = (index+1) % this.dots.length
            this.setDots(index)
            this.setPanels(index)
        }
    }
    setDots(index){
        this.dots.forEach(dot => dot.classList.remove('active'))
        this.dots[index].classList.add('active')
    }
    
    setPanels(index){
        this.panels.forEach(penel => penel.style.zIndex = 1)
        this.panels[index].style.zIndex = 10
    }
}

document.querySelectorAll('.carousel').forEach(carousel => {
    new Carousel(carousel)
})