JS和CSS实现的原生轮播图 🍗 前言 🍖 JS+CSS实现滑动轮播图 🍔 纯CSS实现滑动轮播图 🍿 JS+CSS实现浅入浅出轮播图 🥪 JS+CSS实现滑动带遮罩轮播图 🧀 JS+CSS实现卡片式轮播图

Posted on by hackdl

文章目录

  • 🍗 前言
  • 🍖 JS+CSS实现滑动轮播图
  • 🍔 纯CSS实现滑动轮播图
  • 🍿 JS+CSS实现浅入浅出轮播图
  • 🥪 JS+CSS实现滑动带遮罩轮播图
  • 🧀 JS+CSS实现卡片式轮播图

🍗 前言

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

🍖 JS+CSS实现滑动轮播图

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

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>Documenttitle>
  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来实现，适合不需要和用户交互的广告图轮播图片

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的动画属性以及透明度属性来进行设置，显示轮播图数量，通过点击轮播图中的索引点来切换轮播图。适合需要和用户交互的简单轮播图

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>Documenttitle>
  style>
    * {
      padding: 0;
      margin: 0;
    }

    .banner {
      display: none;
    }

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

    .item {
      width: 600px;
      height: 300px;
      animation-name: fade;
      animation-duration: 1.5s;
    }

    .item img {
      width: 100%;
    }


    @keyframes fade {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }

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

    .points p {
      border-radius: 5px;
      margin: 0 10px;
      cursor: pointer;
    }
  style>
head>


body>
  div class="bannerBox">
    ul>
      li class="item banner">
        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 banner">

        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 banner">

        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 banner">

        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 banner">

        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 banner">
        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 class="points">
    div>

  div>
  script>
    let index = 0;
    let pointsBox = document.querySelector(".points")
    let banners = document.querySelectorAll(".banner");
    for (let i = 0; i  banners.length; i++) {
      let p = document.createElement('p')
      pointsBox.appendChild(p)
      p.style.background = 'gray';
      p.style.width = '10px'
      p.style.height = '10px'
    }
    let points = document.querySelectorAll('.points p')

    const initBanber = () => {
      for (let i = 0; i  banners.length; i++) {
        banners[i].style.display = "none";
        points[i].style.background = 'gray';
        points[i].style.width = '10px'
        points[i].style.height = '10px'
      }
      index++;
      if (index > banners.length) {
        index = 1
      }
      points[index - 1].style.background = 'white';
      points[index - 1].style.width = '20px'
      banners[index - 1].style.display = "block";
    }
    let timer = null;
    points.forEach((item, i) => {
      item.onclick = function () {
        index = i
        initBanber();
      }
    });
    const initInterval = () => {
      timer = setInterval(() => {
        initBanber()
      }, 3000);
    }
    pointsBox.addEventListener('mouseover', function () {
      clearInterval(timer)
    })
    pointsBox.addEventListener('mouseout', function () {
      initInterval()
    })
    initBanber();
    initInterval();
  script>
body>

html>

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

主要对CSS中的index属性进行更改，搭配CSS动画属性对轮播图进行设置。支持鼠标悬停，鼠标离开自动播放。

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>Documenttitle>
  style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }


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


    .item {
      width: 600px;
      height: 300px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
    }

    .ani {
      animation: cover 2s linear;
      z-index: 3 !important;
    }

    .ani::before {
      content: "";
      display: none;
    }

    .item::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 600px;
      background-color: rgba(0, 0, 0, .8);
    }

    @keyframes cover {
      from {
        right: 600px;
      }

      to {
        right: 0px;
      }
    }

    .item img {
      width: 100%;
    }
  style>
head>

body>
  div class="cardBox">
    ul class="imgBox">
      li class="item">li>
      li class="item ani">
        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>
  div>
  script>
    let items = document.querySelectorAll(".item")
    let imgBox = document.querySelector(".imgBox")
    let index = 1
    let timer = null
    const initInterval = () => {
      timer = setInterval(() => {
        items.forEach((item, index) => {
          let translateX = index * 600
          item.style.zIndex = `-1`
          item.classList.remove('ani')
        })
        items[index].classList.add('ani')
        let pre = index - 1
        items[pre].style.zIndex = '2'
        index++
        if (index >= 7) {
          index = 1
        }
      }, 4000);
    }

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

    imgBox.addEventListener("mouseout", () => {
      initInterval()
    })
  script>
body>

html>

🧀 JS+CSS实现卡片式轮播图

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

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>Documenttitle>
  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>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: