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

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

案例：简单轮播图

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="images/1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="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>