JS和CSS实现的原生轮播图

ゞ浴缸里的玫瑰 2024-05-04 08:14 52阅读 0赞

#### 文章目录 ####

*  ? 前言
 *  ? JS+CSS实现滑动轮播图
 *  ? 纯CSS实现滑动轮播图
 *  ? JS+CSS实现浅入浅出轮播图
 *  ? JS+CSS实现滑动带遮罩轮播图
 *  ? JS+CSS实现卡片式轮播图

## ? 前言 ##

图片来自百度图片，可以更换成你自己喜欢的图片，宽高目前按照自己的像素比来进行设置的，可以根据自己需要在CSS和JS中进行修改。有好的想法后再继续更新。欢迎大家评论收藏，多提宝贵意见。

## ? JS+CSS实现滑动轮播图 ##

使用JS加CSS来实现的幻灯片，主要使用的是CSS的transform属性中的translate来实现，适合与用户交互的轮播图，展现轮播图的数量，用户可自由进行选择。  
![在这里插入图片描述][7628c6f718fe4a77889a03821fdfbb40.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          
          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;
        }
      </style>
    </head>
    
    <body>
      <div class="cardBox">
        <div class="btn left"></div>
        <div class="btn right"></div>
        <ul class="imgBox">
          <li class="item">
            <img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
          </li>
          <li class="item">
    
            <img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
              srcset="">
          </li>
          <li class="item">
    
            <img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
              srcset="">
          </li>
          <li class="item">
    
            <img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
              srcset="">
          </li>
          <li class="item">
    
            <img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""
              srcset="">
          </li>
          <li class="item">
            <img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
              srcset="">
          </li>
        </ul>
        <ul class="pointBox">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <script>
        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 <= 0) {
          
            index = 6
          }
          index--
          let translateX = -index * 600
          card.style.transform = `translateX(${ translateX}px)`
        }
        rightBtn.onclick = function () {
          
          if (timer) {
          
            clearInterval(timer)
          }
          index++
          let translateX = -index * 600
          card.style.transform = `translateX(${ translateX}px)`
          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)`
          }
        })
      </script>
    </body>
    
    </html>

## ? 纯CSS实现滑动轮播图 ##

主要使用css3的动画属性以及translate来实现，适合不需要和用户交互的广告图轮播图片  
![在这里插入图片描述][4144e0911685481cb3ab524352971ec2.gif_pic_center]

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="UTF-8">
      <title>css3 实现幻灯片效果</title>
      <style type="text/css">
        * {
          
          margin: 0;
          padding: 0;
          list-style: none;
        }
    
        .banner {
          
          width: 600px;
          height: 400px;
          margin: 100px auto;
          overflow: hidden;
          box-shadow: 0 0 5px rgba(0, 0, 0, 1);
          border-radius: 5px;
        }
    
        .banner ul {
          
          width: 2000px;
          height: 100%;
          animation: loops 10s infinite ease;
        }
    
        .item {
          
          width: 600px;
          height: 100%;
          float: left;
        }
    
        .item img {
          
          width: 600px;
          height: 100%;
        }
    
        @keyframes loops {
          
          0% {
          
            transform: translateX(0);
          }
    
          50% {
          
            transform: translateX(-600px);
          }
    
          100% {
          
            transform: translateX(-1200px);
          }
        }
      </style>
    </head>
    
    <body>
      <div class="banner">
        <ul>
          <li class="item">
    
            <img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
              srcset="">
          </li>
          <li class="item">
    
            <img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""
              srcset="">
          </li>
          <li class="item">
            <img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
              srcset="">
          </li>
        </ul>
      </div>
    </body>
    
    </html>

## ? JS+CSS实现浅入浅出轮播图 ##

使用CSS的动画属性以及透明度属性来进行设置，显示轮播图数量，通过点击轮播图中的索引点来切换轮播图。适合需要和用户交互的简单轮播图  
![在这里插入图片描述][32fab018a1234538972ad6144d9aed6f.gif_pic_center]

## ? JS+CSS实现滑动带遮罩轮播图 ##

主要对CSS中的index属性进行更改，搭配CSS动画属性对轮播图进行设置。支持鼠标悬停，鼠标离开自动播放。  
![在这里插入图片描述][32a3c6a4739b49989a77edab278f86ab.gif_pic_center]

## ? JS+CSS实现卡片式轮播图 ##

先将主要的元素进行相对定位，而后通过z-index改变层级让其显示在主要位置，通过transform的scale属性改变主要位置图片的大小来形成卡片堆叠式效果。鼠标靠上去后停止轮播图播放，离开后自动播放，通过左右两个箭头改变轮播图显示位置。  
![在这里插入图片描述][053eadd03e974533b65cf912322f0e54.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          
          margin: 0;
          padding: 0;
          list-style: none;
        }
    
    
    
        .bannerBox {
          
          position: relative;
          width: 900px;
          height: 300px;
          box-shadow: 0 0 10px gray;
          margin: 10% auto 0 auto;
          border-radius: 5px;
          overflow: hidden;
          background-color: rgb(0, 0, 0, .8);
    
    
        }
    
        #banner {
          
          list-style: none;
          position: absolute;
          padding: 0;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 800px;
          height: 200px;
        }
    
    
        #banner:hover {
          
          cursor: pointer;
        }
    
    
        #banner li {
          
          float: left;
          position: absolute;
          left: 0px;
          transition-duration: 1s;
        }
    
        #btn {
          
          opacity: 0;
          transition: all .5s;
        }
    
        #btn li {
          
          position: absolute;
          top: 50%;
          width: 18px;
          height: 18px;
          border-top: 3px solid rgba(255, 255, 255, .6);
          border-right: 3px solid rgba(255, 255, 255, .6);
          z-index: 100;
          cursor: pointer;
    
        }
    
        .bannerBox:hover #btn {
          
          opacity: 1;
        }
    
        #btn li:Hover {
          
          border-color: white;
        }
    
        .prev {
          
          left: 15px;
          transform: rotate(-135deg);
        }
    
        .next {
          
          right: 15px;
          transform: rotate(45deg);
        }
      </style>
    </head>
    
    <body>
      <div class="bannerBox">
        <ul id="banner"></ul>
        <ul id="btn">
          <li class="prev"></li>
          <li class="next"></li>
        </ul>
      </div>
      <script>
        let timer = setInterval(get_next, 3000)
        let liArr = new Array();
        var cur_ul = document.querySelector("#banner");
        let bannerBox = document.querySelector('.bannerBox')
        let imgArr = [
          "https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
          "https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          "https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          "https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          "https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
          "https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        ]
        let imgLen = imgArr.length - 1;
        for (let i = 1; i <= imgLen; i++) {
          
          var cur_li = document.createElement("li");
          var cur_img = document.createElement("img");
    
          cur_img.src = imgArr[i];
          cur_img.style.width = "400px";
          cur_img.style.height = "200px";
          cur_li.appendChild(cur_img);
    
          if (i != imgLen) {
          
            cur_li.id = imgLen - i;
          } else {
          
            cur_li.id = imgLen;
          }
          cur_ul.appendChild(cur_li)
          liArr.push(cur_li);
          liArr[liArr.length - 1].style.left = "0px";
        }
        let len = liArr.length - 1;
        liArr[len - 2].style.left = "0px";
        liArr[len - 1].style.zIndex = 50;
        liArr[len - 1].style.left = "200px";
        liArr[len - 1].style.transform = "scale(1.3)";
        liArr[len].style.left = "400px";
    
        function get_pre() {
          
          let give_up = liArr[0];
          liArr.shift()
          liArr.push(give_up)
          for (let i = 0; i <= len; i++) {
          
            liArr[i].style.zIndex = i;
            liArr[i].style.transform = "scale(1)"
    
          }
          liArr[len - 2].style.left = "0px";
          liArr[len - 1].style.zIndex = 50
          liArr[len - 1].style.left = "200px";
          liArr[len - 1].style.transform = "scale(1.3)"
          liArr[len].style.left = "400px";
        }
    
        function get_next() {
          
          let give_up = liArr[len];
          liArr.pop()
          liArr.unshift(give_up)
          for (let i = 0; i <= len; i++) {
          
            liArr[i].style.zIndex = i;
            liArr[i].style.transform = "scale(1)"
    
          }
          liArr[len - 2].style.left = "0px";
          liArr[len - 1].style.zIndex = 50
          liArr[len - 1].style.left = "200px";
          liArr[len - 1].style.transform = "scale(1.3)"
          liArr[len].style.left = "400px";
        }
    
    
        let prev = document.querySelector(".prev")
        prev.onclick = function () {
          
          get_pre();
        }
        let next = document.querySelector(".next")
        next.onclick = function () {
          
          get_next();
        }
        bannerBox.addEventListener("mouseover", () => {
          
          clearInterval(timer);
        })
        bannerBox.addEventListener("mouseout", () => {
          
          timer = setInterval(get_next, 3000)
        })
      </script>
    </body>
    
    </html>

以上就是本次分享的JS和CSS实现的原生轮播图的一些示例，使用的图片来自百度，代码片可以直接复制使用。

[7628c6f718fe4a77889a03821fdfbb40.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/fa8261b1ed2249efa500f25634a8e5da.gif
[4144e0911685481cb3ab524352971ec2.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/07a531ad3c1640abbf3146e6155b52c0.gif
[32fab018a1234538972ad6144d9aed6f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/19077c0606b042a8a39f9bd7af69622f.gif
[32a3c6a4739b49989a77edab278f86ab.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/f01dd00ae49d4eeea04992b0a03ef2df.gif
[053eadd03e974533b65cf912322f0e54.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/9de6283b00b44d6495b88740207160d7.gif