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="data:images/01.jpg" /></li>

        <li><img src="data:images/02.jpg" /></li>

        <li><img src="data:images/03.jpg" /></li>

        <li><img src="data:images/04.jpg" /></li>

        <li><img src="data: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>
巴特西

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

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

最新文章

热门文章
