案例：左右焦点轮播图（淘宝焦点图）

最新推荐文章于 2021-12-30 22:08:44 发布

zhw13260525048

最新推荐文章于 2021-12-30 22:08:44 发布

阅读量953

点赞数

分类专栏：前端案例文章标签： JS 案例轮播图左右焦点淘宝轮播图

本文链接：https://blog.csdn.net/zhw13260525048/article/details/83960044

版权

前端案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!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];
  //获取左右焦点的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);
    }
  };


  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 20);
  }

</script>

</body>
</html>

zhw13260525048

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
案例：左右焦点轮播图（淘宝焦点图）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body, ul, ol, li, img { margin: 0;
复制链接

扫一扫

专栏目录