JS和CSS实现的原生轮播图

JS+CSS实现滑动轮播图

使用JS加CSS来实现的幻灯片，主要使用的是CSS的transform属性中的translate来实现，适合与用户交互的轮播图，展现轮播图的数量，用户可自由进行选择。

JS和CSS实现的原生轮播图




  
  
  
  Document
  
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }


    .cardBox {
      width: 600px;
      height: 300px;
      box-shadow: 0 0 10px gray;
      border-radius: 5px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }

    .imgBox {
      width: 3600px;
      height: 300px;
      transition: all 1s;
      transform: translateX(0px);
    }

    .item {
      width: 600px;
      height: 300px;
      float: left;

    }

    .item img {
      width: 100%;
    }

    .btn {
      width: 20px;
      height: 20px;
      top: calc(50% - 20px);
      border-right: solid white;
      border-top: solid white;
      position: absolute;
      z-index: 99;
      opacity: .6;
      cursor: pointer;
    }

    .btn:hover {
      opacity: 1;
    }

    .left {
      left: 15px;
      transform: rotate(-135deg);
    }

    .right {
      right: 15px;
      transform: rotate(45deg);
    }

    .pointBox {
      display: flex;
      width: 50%;
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      justify-content: center;
    }

    .pointBox li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: gray;
      margin: 0 10px;
      opacity: .7;
      cursor: pointer;
    }

    .pointBox li:hover {
      opacity: 1;
      background-color: white;
    }
  



  
    
    
    
      
        
      
      

        
      
      

        
      
      

        
      
      

        
      
      
        
      
    
    
      
      
      
      
      
      
    
  
  
    let card = document.querySelector('.cardBox ul')
    let cardBox = document.querySelector('.cardBox')
    let items = document.querySelectorAll(".item")
    let leftBtn = document.querySelector(".left")
    let rightBtn = document.querySelector(".right")
    let points = document.querySelectorAll(".pointBox li")
    let index = 0
    items.forEach((item, index) => {
      let translateX = index * 600
      item.style.left = `${translateX}px`
    })
    let timer = null
    points[index].style.background = 'white'
    points[index].style.width = '16px'
    points[index].style.borderRadius = '5px'
    const initInterval = () => {
      timer = setInterval(() => {
        index++
        let pointIndex = index;
        points[pointIndex].style.background = 'white'
        points[pointIndex].style.width = '16px'
        points[pointIndex].style.borderRadius = '5px'
        if (pointIndex == 0) {
          points[5].style.background = 'gray'
          points[5].style.width = '8px'
        } else {
          points[pointIndex - 1].style.background = 'gray'
          points[pointIndex - 1].style.width = '8px'
        }


        let translateX = -index * 600
        card.style.transform = `translateX(${translateX}px)`
        if (index >= 5) {
          index = -1
        }
      }, 3000);
    }

    initInterval()
    cardBox.addEventListener("mouseover", () => {
      clearInterval(timer)
    })

    cardBox.addEventListener("mouseout", () => {
      initInterval()
    })
    // btn.addEventListener("mouseout", () => {
    //   initInterval()
    // })
    leftBtn.onclick = function () {
      if (timer) {
        clearInterval(timer)
      }
      if (index = 5) {
        index = -1
      }
    }
    points.forEach((item, i) => {
      item.onclick = () => {
        points.forEach(element => {
          element.style.background = 'gray'
          element.style.width = '8px'
          element.style.borderRadius = '50%'
        });
        item.style.background = 'white'
        item.style.width = '16px'
        item.style.borderRadius = '5px'
        index = i;
        let translateX = -index * 600
        card.style.transform = `translateX(${translateX}px)`
      }
    })