HTML学习之轮播图

2023-07-08 03:49 作者：Admin

这可以说是一种非常简单的实现轮播图的方法了，由于时间仓促所以没写自动轮播部分。简单说一下原理吧，就是把所有图片堆叠在一个盒子里，设置所有图片的透明度为0，这样就把所有图片都隐藏了，第一张图片除外（第一张透明度设为1），当要切换到某张图片时，在把该图片的透明度设为1，而其他的图片透明度设为0，这样就实现了简单的轮播啦。

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>淡入淡出轮播图</title>
    <!-- css样式 -->
    <style type="text/css">
      /*清除边距*/
      div,
      ul,
      li {
        margin: 0;
        padding: 0;
      }

      /*首先准备一个放图片的容器*/
      .container {
        width: 500px;
        height: 280px;
        position: relative;
        top: 100px;
        left: 30%;
        /*border: 1px solid #ccc;*/
      }

      /*图片样式*/
      .container img {
        position: absolute; /*把所有图片放在同一个位置*/
        width: 100%;
        transition-duration: 1s; /*设置过渡时间*/
        opacity: 0; /*把所有图片变透明*/
      }
      /*图片显示开关*/
      .container img.on {
        opacity: 1; /*用于显示图片*/
      }

      /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
      .left,
      .right {
        position: absolute;
        top: 30%;
        width: 60px;
        height: 100px;
        line-height: 100px;
        background-color: #666;
        opacity: 0.5;
        text-align: center;
        font-size: 60px;
        color: #ccc;
        display: none; /*先隐藏按钮*/
        cursor: pointer; /*设置鼠标悬停时的样式*/
      }
      .left {
        left: 0;
      }
      .right {
        right: 0;
      }
      .container:hover .left,
      .container:hover .right {
        display: block; /*鼠标悬停才容器范围内时显示按钮*/
      }
      .left:hover,
      .right:hover {
        color: #fff;
      }

      /*焦点*/
      .container ul {
        position: absolute;
        bottom: 0;
        max-width: 500px;
        padding: 5px 200px;
      }
      .container ul li {
        list-style: none;
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-left: 10px;
        background-color: #ccc;
        cursor: pointer;
      }
      .container ul li.active {
        background-color: #fff; /*焦点激活时的样式*/
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 图片 -->
      <!-- 先把第一张图片显示出来 -->
      <img class="on" src="img/1.jpg" />
      <img src="img/2.jpg" />
      <img src="img/3.jpg" />
      <img src="img/4.jpg" />
      <img src="img/5.jpg" />

      <!-- 左右按钮 -->
      <div class="left"><</div>
      <div class="right">></div>

      <!-- 焦点 -->
      <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

    <!-- js部分 -->
    <script type="text/javascript">
      //1、找到container下的所有img标签,li标签,左右按钮
      var aImgs = document.querySelectorAll(".container img");
      var aLis = document.querySelectorAll(".container li");
      var btnLeft = document.querySelector(".container .left");
      var btnRight = document.querySelector(".container .right");

      // //检验是否找到
      // console.log(aImgs);
      // console.log(aLis);
      // console.log(btnLeft);
      // console.log(btnRight);

      //点击事件
      //点击按钮图片切换
      var index = 0; //当前图片下标
      var lastIndex = 0;
      btnRight.onclick = function () {
        //记录上一张图片的下标
        lastIndex = index;
        //清除上一张图片的样式
        aImgs[lastIndex].className = "";
        aLis[lastIndex].className = "";

        index++;
        index %= aImgs.length; //实现周期性变化
        //设置当前图片的样式
        aImgs[index].className = "on";
        aLis[index].className = "active";
      };
      //左边按钮类似
      btnLeft.onclick = function () {
        //记录上一张图片的下标
        lastIndex = index;
        //清除上一张图片的样式
        aImgs[lastIndex].className = "";
        aLis[lastIndex].className = "";

        index--;
        if (index < 0) {
          index = aImgs.length - 1;
        }
        //设置当前图片的样式
        aImgs[index].className = "on";
        aLis[index].className = "active";
      };
    </script>
  </body>
</html>

文章来源：https://www.cnblogs.com/sky-top/p/11624570.html

标签： #轮播图 #HTML