原生JSbanner图实现滑动轮播图和淡入淡出轮播图

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/115337703

此博客介绍了两种轮播图的实现方式：滑动轮播图和淡入淡出轮播图。滑动轮播图通过CSS和JavaScript实现图片的平滑切换，具有左右导航按钮和指示圆点；淡入淡出轮播图则展示图片的渐显渐隐效果，同样支持导航控制。两种轮播图均具备鼠标悬停暂停、离开继续播放的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑动轮播图

<!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>
</head>
<style>
  body,
  ul,
  li {
    margin: 0;
    padding: 0;
  }

  #background {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    border: 1px solid black;
    overflow: hidden;
  }

  #pre {
    width: 30px;
    height: 100px;
    left: 0;
    top: 40%;
    position: absolute;
    opacity: 0.3;
    transform: rotateZ(180deg);
  }

  #next {
    width: 30px;
    height: 100px;
    right: 0;
    top: 40%;
    position: absolute;
    opacity: 0.3;
  }

  #daizi {
    width: 3000px;
    height: 100%;
    margin-left: 0px;
    transition: all 1s linear;
  }

  #daizi img {
    width: 600px;
    height: 100%;
    float: left;

  }

  ul {
    width: 100px;
    height: 20px;
    bottom: 0;
    left: 225px;
    position: absolute;
  }

  ul li {
    width: 15px;
    height: 15px;
    float: left;
    border-radius: 50%;
    margin-left: 10px;
    background-color: white;
    opacity: 0.4;
    list-style-type: none;
  }
</style>

<body>
  <div id="background">
    <div id="daizi">
      <img id="img1" src="./img/1.jpg" alt="">
      <img id="img2" src="./img/2.jpg" alt="">
      <img id="img3" src="./img/3.jpg" alt="">
      <img id="img4" src="./img/4.jpg" alt="">
      <img id="img5" src="./img/1.jpg" alt="">
    </div>
    <ul>
      <li id="id1"></li>
      <li id="id2"></li>
      <li id="id3"></li>
      <li id="id4"></li>
    </ul>
    <img id="pre" src="./img/btn.jpg">
    <img id="next" src="./img/btn.jpg">
  </div>
</body>
<script>
  var daizi = document.getElementById("daizi");//找到袋子
  var backg = document.getElementById("background");
  var pre = document.getElementById("pre");
  var next = document.getElementById("next");
  var btn = document.getElementsByTagName("li");

  var img = 0;//记录图片下标

  var timer = null;
  //初始化圆点
  btn[img].style.backgroundColor = "red";
  btn[img].style.opacity = 1;
  //每隔3S切换下一张图片
  timer = setInterval(function () {
    tab1();
  }, 2000)
  //切换函数
  function tab1() {
    img++;
    if (img > 4) {
      img = 0;
      btn[img].style.backgroundColor = "red";
      btn[img].style.opacity = 1;
      daizi.style.transition = "none";
      daizi.style.marginLeft = -600 * img + "px";
      setTimeout(tab1, 100);
    } else {
      daizi.style.transition = "all 1s linear";
      daizi.style.marginLeft = -600 * img + "px";
      //圆点事件
      for (var i = 0; i < 4; i++) {
        btn[i].style.backgroundColor = "white";
        btn[i].style.opacity = 0.4;
      }
      // console.log(img);
      if (img == 4) {
        btn[0].style.backgroundColor = "red";
        btn[0].style.opacity = 1;
      } else {
        btn[img].style.backgroundColor = "red";
        btn[img].style.opacity = 1;
      }

    }
  }
  function tab2() {
    // console.log(img);
    img--;
    if (img < 0) {
      img = 4;
      daizi.style.transition = "none";
      daizi.style.marginLeft = -600 * img + "px";
      setTimeout(tab2, 100);
    } else {
      daizi.style.transition = "all 1s linear";
      daizi.style.marginLeft = -600 * img + "px";
      //圆点事件
      for (var i = 0; i < 4; i++) {
        btn[i].style.backgroundColor = "white";
        btn[i].style.opacity = 0.4;
      }
      // console.log(img);
      if (img == 4) {
        btn[0].style.backgroundColor = "red";
        btn[0].style.opacity = 1;
      } else {
        btn[img].style.backgroundColor = "red";
        btn[img].style.opacity = 1;
      }
    }
  }
  //鼠标移入移出
  backg.onmouseenter = function () {
    clearInterval(timer);
  }
  backg.onmouseleave = function () {
    timer = setInterval(tab1, 2000)
  }

  //鼠标点击左右键移动图片
  pre.onclick = function () {
    tab2();
  }
  next.onclick = function () {
    tab1();
  }
  //鼠标移入左右键
  pre.onmouseenter = function () {
    pre.style.opacity = "1";
  }
  pre.onmouseleave = function () {
    pre.style.opacity = "0.3";
  }
  next.onmouseenter = function () {
    next.style.opacity = "1";
  }
  next.onmouseleave = function () {
    next.style.opacity = "0.3";
  }
  //鼠标点击按钮切换图片
  for (var i = 0; i < 4; i++) {
    btn[i].onclick = function () {
      // console.log(this.id.substr(2, 1));
      img = this.id.substr(2, 1) - 2;
      // console.log(img);
      tab1();
    }
  }
</script>

</html>

在这里插入图片描述

淡入染出轮播图

<!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>
</head>
<style>
  #back {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    border: 1px solid red;
  }

  #back #pre {
    width: 30px;
    height: 60px;
    left: 0;
    top: 170px;
    z-index: 2;
    position: absolute;
    opacity: 0.3;
    transform: rotateZ(180deg);
  }

  #back #next {
    width: 30px;
    height: 60px;
    right: 0;
    top: 170px;
    z-index: 2;
    opacity: 0.3;
    position: absolute;
  }

  #daizi {
    width: 100%;
    height: 100%;
    position: relative;
  }

  #daizi img {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 1s linear;
  }

  #id1 {
    z-index: 1;
  }

  #btn {
    width: 120px;
    height: 20px;
    position: absolute;
    left: 240px;
    bottom: 0;
    z-index: 2;
    display: flex;

    justify-content: space-between;
  }

  #btn span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0.3;
    background-color: white;
  }
</style>

<body>
  <div id="back">
    <div id="daizi">
      <img src="./img/1.jpg" alt="" id="id1">
      <img src="./img/2.jpg" alt="" id="id2">
      <img src="./img/3.jpg" alt="" id="id3">
      <img src="./img/4.jpg" alt="" id="id4">
    </div>
    <img src="./img/btn.jpg" id="pre"><img src="./img/btn.jpg" id="next">
    <!-- 圆点 -->
    <div id="btn">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
<script>
  var timer = null;
  var img = document.getElementsByTagName("img");
  var span = document.getElementsByTagName("span");
  var num = 0;

  span[0].style.opacity = 1;
  span[0].style.backgroundColor = 'red';

  timer = setInterval(function () {
    num++;
    tab();
  }, 2000)

  function tab() {
    if (num >= 4) {
      num = 0;
    }
    if (num < 0) {
      num = 3
    }
    for (var i = 0; i < 4; i++) {
      img[i].style.opacity = 0;
      span[i].style.opacity = 0.3;
      span[i].style.backgroundColor = 'white';
    }
    img[num].style.opacity = 1;
    span[num].style.opacity = 1;
    span[num].style.backgroundColor = 'red';
  }
  for (let i = 0; i < 4; i++) {
    span[i].onclick = function () {
      num = i;
      tab();
      console.log(i);
    }
  }
  //鼠标点击
  pre.onclick = function () {
    // console.log('1');
    setTimeout(function () {
      num--;
      tab();
    }, 150)
  }
  next.onclick = function () {
    setTimeout(function () {
      num++;
      tab();
    }, 150)
  }
  //鼠标移入移出
  back.onmouseenter = function () {
    clearInterval(timer);
  }
  back.onmouseleave = function () {
    timer = setInterval(function () {
      num++;
      tab();
    }, 2000)
  }
  pre.onmouseenter = function () {
    pre.style.opacity = '1';
  }
  pre.onmouseleave = function () {
    pre.style.opacity = '0.3';
  }
  next.onmouseenter = function () {
    next.style.opacity = '1';
  }
  next.onmouseleave = function () {
    next.style.opacity = '0.3';
  }
</script>

</html>