欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-18 19:29:59
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点

案例:简单轮播图

 

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>