原生js实现轮播图

牛牛的天线

于 2024-08-12 16:04:13 发布

阅读量172

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_37432625/article/details/141134368

版权

前提：给定图片个数（默认是5），图片以 swiper1.jpg 类似这种命名。图片和.html文件在同一个文件夹下。

功能：基础轮播图功能，拖拽切换图片。

bug：有bug，切换的时候的效果有点问题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      width: 600px;
      height: 400px;
      position: relative;
    }
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .swiper{
      width: 3000px;
      height: 100%;
      position: absolute;
      /* 默认展示第一张图片 */
      left: 0;
      top: 0;
    }
    .swiperImage{
      width: 600px;
      height: 100%;
      float: left;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 1;
      transition: .2s;
      margin: 0;
      position: absolute;
    }
    .leftBtn,.rightBtn{
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: rgba(224, 235, 224, 0.137);
      top: calc( 200px - 25px);
      font-size: 50px;
      line-height: 50px;
      text-align: center;
      color: white;
      cursor: pointer;
      z-index: 2;
    }
    .leftBtn:hover,.rightBtn:hover{
      background-color: rgba(224, 235, 224, 0.525);
    }
    .leftBtn{
      left: 0;
    }
    .rightBtn{
      right: 0;
    }
    .pagination{
      list-style: none;
      position: absolute;
      bottom: 0;
      left: calc( 50% - 100px);
      right: 0;
      width: 200px;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 2;
      margin: 10px;
    }
    .pagination li{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }
    .pagination li:hover,.pagination li.active{
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <!-- 轮播图 -->
  <div class="container" draggable>
    <ul class="swiper" draggable>
    </ul>
    <div class="leftBtn"><</div>
    <div class="rightBtn">></div>
    <ul class="pagination">
    </ul>
  </div>
  <script>
    // 轮播图图片个数
    const num = 5;
    // 最外层容器
    let container = document.querySelector(".container");
    // 控制第几张图片的下方按钮
    let pagination = document.querySelector(".pagination");
    // 左边按钮
    let leftBtn = document.querySelector(".leftBtn");
    // 右边按钮
    let rightBtn = document.querySelector(".rightBtn");
    // 轮播图图片
    let swiper = document.querySelector(".swiper");
    // 设置展示页面的index
    let currentIndex = 0;
    init();
    // 得到下方按钮
    let pageArr = pagination.querySelectorAll("li");
    let x;
    swiper.addEventListener("dragstart", function (e) {
        // 最开始 鼠标的x位置
        x = e.clientX;
    })  
    swiper.addEventListener("dragend", function (e) {
      if (e.clientX < x){
        // 往左边拖拽
        // 切换下一页
        nextImg();
      }else{
        frontImg();
      }
    })  

    // 默认第一张图片
    setImage(currentIndex);
    
    // 初始化
    function init(){
      for (let i = 0; i < num; i++) {
        // 初始化图片
        let li = document.createElement("li");
        li.className = "swiperImage";
        li.style.backgroundImage = `url(./swiper${i + 1}.jpg)`;
        li.draggable = "true";
        swiper.append(li);
        // 初始化下标
        let pageLi = document.createElement("li");
        pageLi.innerHTML = i + 1;
        pagination.append(pageLi);
      }
    }

    // 设置轮播图目前图片
    function setImage(index){
      // 根据目前的 index 设置位置
      let arr = swiper.querySelectorAll(".swiperImage");
      
      for(let i = 0;i < arr.length;i++){
        let style = arr[i].getBoundingClientRect();
        console.log(style);
        if (i === index){
          arr[i].style.opacity = 1;
          // 这是现在展示的图片 
          // swiper.style.left = -style.x + "px";
          arr[i].style.top = 0;
          arr[i].style.left = 0;
        }else{
          if (i === index - 1 || (index === 0 && i === num-1)) {
            // 是选定的前一张
            arr[i].style.top = 0;
            arr[i].style.left = -style.width + "px";
          } else if (i === index + 1 || (index === num-1 && i === 0)) {
            // 是选定的下一张
            arr[i].style.top = 0;
            arr[i].style.left = style.width + "px";
          } else {
            // 其他图片
            arr[i].style.top = -style.height + "px";
          }
          arr[i].style.opacity = 0;
        }
        
      }
      // 设置下面的下标
      console.log("pageArr", pageArr);
      for (let i = 0;i < pageArr.length;i++){
        if (i === index){
          pageArr[index].className = "active";
        }else{
          pageArr[i].className = "";
        }
      }
      
    }
  
    // 左边的按钮
    leftBtn.addEventListener("click",function(){
      // 切换到前面一个图片
      frontImg();
    })
    // 右边的按钮
    rightBtn.addEventListener("click", function () {
      // 切换到前面一个图片
      nextImg();
    })


    // 切换到前一页
    function frontImg(){
      currentIndex = currentIndex === 0 ? num - 1 : currentIndex - 1;
      setImage(currentIndex);
    }
    // 切换到下一页
    function nextImg() {
      currentIndex = currentIndex === num - 1 ? 0 : currentIndex + 1;
      setImage(currentIndex);
    }
    // 下面的按钮  事件委托
    pagination.addEventListener("click",function(e){
      setImage(e.target.textContent - 1);
    })
  </script>
</body>
</html>