JS---案例---左右焦点轮播图(tb)

案例---左右焦点轮播图(tb)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body,
    ul,
    ol,
    li,
    img {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #box {
      width: 520px;
      height: 280px;
      padding: 5px;
      position: relative;
      border: 1px solid #ccc;
      margin: 100px auto 0;
    }

    .ad {
      width: 520px;
      height: 280px;
      /*overflow: hidden;*/
      position: relative;
    }

    #box img {
      width: 520px;
    }

    .ad ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .ad ol li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      background: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      _display: inline;
    }

    .ad ol li.current {
      background: yellow;
    }

    .ad ul li {
      float: left;
    }

    .ad ul {
      position: absolute;
      top: 0;
      width: 2940px;
    }

    .ad ul li.current {
      display: block;
    }

    #focusD {
      display: none;
    }

    #focusD span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #focusD #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>

<body>
  <div id="box" class="all">
    <div class="ad">
      <ul id="imgs">
        <li><img src="images/01.jpg" /></li>
        <li><img src="images/02.jpg" /></li>
        <li><img src="images/03.jpg" /></li>
        <li><img src="images/04.jpg" /></li>
        <li><img src="images/05.jpg" /></li>
      </ul>
    </div>
    <!--相框-->
    <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
    </div>
  </div>
  <script src="common.js"></script>
  <script>

    //获取最外面的div
    var box = my$("box");
    //获取相框
    var ad = box.children[0];
    //获取相框的宽度
    var imgWidth = ad.offsetWidth;
    //获取ul
    var ulObj = ad.children[0];
    //获取装span左右焦点的div
    var focusD = my$("focusD");

    //显示和隐藏左右焦点的div----为box注册事件
    box.onmouseover = function () {
      focusD.style.display = "block";
    };
    box.onmouseout = function () {
      focusD.style.display = "none";
    };

    //点击右边的按钮
    var index = 0;
    my$("right").onclick = function () {
      if (index < ulObj.children.length - 1) {
        index++;
        animate(ulObj, -index * imgWidth);
      }
    };
    //点击左边的按钮
    my$("left").onclick = function () {
      if (index > 0) {
        index--;
        animate(ulObj, -index * imgWidth);
      }
    };

  </script>

</body>

</html>

相关阅读:
ubuntu命令
 mac获取root权限
 centos7安装解压缩工具 ncompress
ubuntu17.04 配置go环境变量
 vue.js 拦截器
 ubuntu 安装jdk
ubuntu安装deb文件
 初识阿里云 SSL 证书申请
 java之XML
LanProxy 内网映射穿透
原文地址：https://www.cnblogs.com/jane-panyiyun/p/12031686.html