JS---案例：简单轮播图

时间：2023-03-08 17:31:20

案例：简单轮播图

div叫盒子，里面包了2个小盒子，一个是inner，一个是square

inner的div是放ul，里面有li，a，和图片

square的div里面放span，是轮播图的小点

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      margin: 0;

      padding: 0

    }

    ul {

      list-style: none

    }

    img {

      vertical-align: top

    }

    .box {

      width: 730px;

      height: 454px;

      margin: 100px auto;

      padding: 5px;

      border: 1px solid #ccc;

    }

    .inner {

      width: 730px;

      height: 454px;

      background-color: pink;

      overflow: hidden;

      position: relative;

    }

    .inner ul {

      width: 1000%;

      position: absolute;

      top: 0;

      left: 0;

    }

    .inner li {

      float: left;

    }

    .square {

      position: absolute;

      right: 10px;

      bottom: 10px;

    }

    .square span {

      display: inline-block;

      width: 16px;

      height: 16px;

      background-color: #fff;

      text-align: center;

      line-height: 16px;

      cursor: pointer;

    }

    .square span.current {

      background-color: orangered;

      color: #fff;

    }

  </style>

</head>

<body>

  <div class="box" id="box">

    <div class="inner">

      <!--相框-->

      <ul>

        <li><a href="#"><img src="data:images/1.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/2.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/3.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/4.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/5.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/6.jpg" alt="" /></a></li>

      </ul>

      <div class="square">

        <span class="current">1</span>

        <span>2</span>

        <span>3</span>

        <span>4</span>

        <span>5</span>

        <span>6</span>

      </div>

    </div>

  </div>

  <script src="common.js"></script>

  <script>

    //获取最外的div

    var box = my$("box");

    //获取相框

    var inner = box.children[0];

    //获取相框的宽度

    var imgWidth = inner.offsetWidth;

    //获取ul

    var ulObj = inner.children[0];

    //获取所有span标签

    var spanObjs = inner.children[1].children;

    //循环遍历所有的span标签，注册鼠标进入的事件

    for (var i = 0; i < spanObjs.length; i++) {

      //循环的时候把索引值保存在每个span的自定义属性中

      spanObjs[i].setAttribute("index", i);

      //注册鼠标进入事件

      spanObjs[i].onmouseover = function () {

        //先干掉所有span的背景颜色

        for (var j = 0; j < spanObjs.length; j++) {

          //移除每个span的类样式

          spanObjs[j].removeAttribute("class");

        }

        //设置当前额span背景颜色

        this.className = "current";

        //移动ul,每个图片的宽*鼠标放在此的按钮索引值

        //获取当前鼠标进入的索引

        var index = this.getAttribute("index");

        animate(ulObj, -index * imgWidth);

      };

    }

  </script>

</body>

</html>

相关文章