Js封装的动画函数实现轮播图

---恢复内容开始---

  • 效果图说明：当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上，并且按钮会以高亮显示

 

  • 项目目录结构

 

  • 用到的js封装的animate()动画

       

 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);
  }
animate.js

 

  • 简单轮播图代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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="animate.js"type="text/javascript"></script>
<script>
    /*我们需要操作：
    当点击右下角按钮时对应的图片移动
    1.需要获取ul的宽度
    2.需要获取每个li的宽度
    3.获取相框的宽度
    4.获取右下角的span，并且为每个span注册鼠标移入和移除

    */
    //获取最外面的div
    var oDiv=document.getElementById('box');
    //获取inner由于inner没有用id所有我们用children的方式
    var inner=oDiv.children[0];
    //获取ul以及他的宽度
    var oUl=inner.children[0];
    //获取相框的宽度
    var imgWidth=inner.offsetWidth;
    var oLi=oUl.children;
    //获取sapn
    var oSpan=inner.children[1].children;

    /*为每个span注册鼠标进入的事件,并且鼠标进入时，对应的地方会显示高亮，这里用排他

    排他功能：就是先将全部的属性移除，然后在某个上面加上特有的current属性
    */

    for(var i=0;i<oSpan.length;i++){
      //由于每循环一次i就会变，所以先保存下来
     //循环的时候把索引值保存在每个span的自定义属性中
    oSpan[i].setAttribute("index",i);
    oSpan[i].onmouseover=function(){

    for(var j=0;j<oSpan.length;j++){
        //先去掉其他属性
        oSpan[j].removeAttribute('class');
    }
    this.className="current";
    
    //移动ul:不管是向左移动还是向右移动ul的left总负的，最大也只可能为0,

     //获取当前鼠标进入的span的索引
      var index=this.getAttribute("index");
      animate(oUl,-index*imgWidth);



    }
    }


  

</script>
</body>
</html>
简单轮播图.html
  • 轮播图的基本实现（排他功能，用相框的宽度求出移动的距离）

      思路理解：

当鼠标放到按钮上的时候，ul移出去的距离为=相框宽度*按钮的下标

  

 

    根据上面接下来获取需要用到的元素对象：

//获取最外面的div
    var oDiv=document.getElementById('box');
    //获取inner由于inner没有用id所有我们用children的方式
    var inner=oDiv.children[0];
    //获取ul以及他的宽度
    var oUl=inner.children[0];
    //获取相框的宽度
    var imgWidth=inner.offsetWidth;
    var oLi=oUl.children;
    //获取sapn
    var oSpan=inner.children[1].children;

遍历每个li,并且做排他功能功能

for(var i=0;i<oSpan.length;i++){
      //由于每循环一次i就会变，所以先保存下来
     //循环的时候把索引值保存在每个span的自定义属性中，
    oSpan[i].setAttribute("index",i);
    oSpan[i].onmouseover=function(){

    for(var j=0;j<oSpan.length;j++){
        //先去掉其他属性
        oSpan[j].removeAttribute('class');
    }
    this.className="current";
    
    //移动ul:不管是向左移动还是向右移动ul的left总负的，最大也只可能为0,

     //获取当前鼠标进入的span的索引
      var index=this.getAttribute("index");
      animate(oUl,-index*imgWidth);

    }
    }

 

 

 

---恢复内容结束---

posted @ 2019-03-03 18:10  mysunshine_SZZ  阅读(691)  评论(0)  编辑  收藏  举报