轮播图案例

最新推荐文章于 2024-01-27 20:21:08 发布

BloggerM

最新推荐文章于 2024-01-27 20:21:08 发布

阅读量439

点赞数

分类专栏：前端案例文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/HTML_Z/article/details/123597545

版权

前端案例专栏收录该内容

5 篇文章

订阅专栏

轮播图案例

案例视图

在这里插入图片描述

案例用到的核心知识

获取 DOM 对象
数组
鼠标进入和进出事件
使用 JS 对样式进行操作
for 循环
if 判断语句
逻辑运算符
三元运算符
自增和自减运算符

案例代码

<!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;
      }
      .container {
        width: 100%;
        height: 520px;
        position: relative;
      }
      img {
        width: 100%;
      }
      .indicator {
        position: absolute;
        bottom: 5px;
        /* 使用子绝父相 设置定位 通过正负间距 */
        left: 50%;
        transform: translateX(-50%);
      }
      .indicator-item {
        height: 5px;
        width: 80px;
        background: white;
        float: left;
        margin-right: 5px;
      }
      .pre,
      .next {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .pre {
        left: 50px;
      }
      .next {
        right: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./img/1.jpg" alt="" id="img" />
      <div class="indicator">
        <div class="indicator-item"></div>
        <div class="indicator-item"></div>
        <div class="indicator-item"></div>
        <div class="indicator-item"></div>
      </div>
      <img src="./img/pre.svg" alt="" class="pre" onclick="pre()" />
      <img src="./img/next.svg" alt="" class="next" onclick="next()" />
    </div>
  </body>
  <script>
    // 获取图片的DOM对象
    var img = document.getElementById("img");
    // 获取轮播容器的DOM对象
    var container = document.getElementsByClassName("container")[0];
    // 获取指示器DOM对象
    var indicatorItem = document.getElementsByClassName("indicator-item");
    var imgArr = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg"];
    var timer = null;
    // 轮播图的下标
    var currentIndex = 0;
    indicatorItem[0].style.background = "red";
    // 鼠标进入轮播容器
    container.onmouseover = function () {
      // 清空计时器，停止播放轮播图
      clearInterval(timer);
    };
    // 鼠标离开轮播容器 暂停播放
    container.onmouseout = function () {
      // 鼠标离开轮播图 继续播放
      aotoPlay();
    };

    // 鼠标进入指示器，切换图片
    for (var i = 0; i < indicatorItem.length; i++) {
      // 由于在事件中无法取到下标 所以将下标保存给DOM对象 在事件中通过this获取
      indicatorItem[i].index = i;
      indicatorItem[i].onmouseover = function () {
        img.src = imgArr[this.index];
        // 改变指示器的颜色或者状态
        changeIndicatorColor(this.index);
      };
    }
    // 上一页
    function pre() {
      currentIndex--;
      // 判断图片的下标不能为负数
      if (currentIndex < 0) {
        currentIndex = imgArr.length - 1;
      }
      img.src = imgArr[currentIndex];
      changeIndicatorColor();
    }
    // 下一页
    function next() {
      currentIndex++;
      // 判断图片的下标不能超过图片数组的长度-1
      if (currentIndex >= imgArr.length) {
        currentIndex = 0;
      }
      img.src = imgArr[currentIndex];
      changeIndicatorColor();
    }

    // 轮播播放
    function aotoPlay() {
      timer = setInterval(function () {
        currentIndex++;
        if (currentIndex >= imgArr.length) {
          currentIndex = 0;
        }
        // 改变图片的路径
        img.src = imgArr[currentIndex];
        // 改变指示器的颜色或者状态
        changeIndicatorColor();
      }, 2000);
    }
    // 改变指示器的颜色
    function changeIndicatorColor(index) {
      for (var i = 0; i < indicatorItem.length; i++) {
        // if (currentIndex == i) {
        //   indicatorItem[currentIndex].style.background = "red";
        // } else {
        //   indicatorItem[i].style.background = "white";
        // }

        // undefined => false (自动转化)
        // 如果index为0,1,2,3的情况下是true  undefined会被识别为false
        // 短路或 左边的表达式结果为true，则整个表达式的结果为true
        // 如果左边的表达式为false，会判断右边的表达式
        indicatorItem[i].style.background =
          (index || currentIndex) == i ? "red" : "white";
      }
    }
    aotoPlay();
  </script>
</html>