前语

前语 图片来自百度图片，可以更换成你自己喜爱的图片，宽高目前设置的宽高是根据自己笔记原本的，可以根据自己需求进行修正。后期有好的主意再继续更新，欢迎大家谈论收藏，多提名贵主张。

JS+CSS完成滑动轮播图

运用JS加CSS来完成的幻灯片，首要运用的是CSS的transform特点中的translate来完成，适合与用户交互的轮播图，展现轮播图的数量，用户可自由进行选择。

JS+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>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来完成，适合不需求和用户交互的广告图轮播图片

JS+CSS实现一些简单轮播图

<!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的动画特点以及透明度特点来进行设置，显现轮播图数量，经过点击轮播图中的索引点来切换轮播图。适合需求和用户交互的简略轮播图

JS+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>Document</title>
  <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动画特点对轮播图进行设置。 支撑鼠标悬停，鼠标脱离自动播映。

JS+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>Document</title>
  <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特点改动首要方位图片的巨细来构成卡片堆叠式作用。鼠标靠上去后中止轮播图播映，脱离后自动播映，经过左右两个箭头改动轮播图显现方位。

JS+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>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>